/* This file was generated using Variable Visualizer Figma plugin */

:root {
  --Layout-Breakpoint: 1440px;
  --Layout-Columns: 12;
  --Layout-Gap: 32px;
  --Layout-Padding-Sides: 112px;
  --Layout-Padding-Top: 96px;
  --Layout-Padding-Bottom: 32px;
  --Font-size-Display-L: 60px;
  --Font-size-Display-M: 48px;
  --Font-size-Display-S: 36px;
  --Font-size-Display-XS: 30px;
  --Font-size-Text-L: 20px;
  --Font-size-Text-M: 18px;
  --Font-size-Text-S: 16px;
  --Font-size-Text-XS: 14px;
  --Line-height-Display-L: 72px;
  --Line-height-Display-M: 60px;
  --Line-height-Display-S: 44px;
  --Line-height-Display-XS: 38px;
  --Line-height-Text-L: 30px;
  --Line-height-Text-M: 28px;
  --Line-height-Text-S: 24px;
  --Line-height-Text-XS: 20px;
  --Navigation-Logo-Height: 48px;
  --Navigation-Icon-Height: 32px;
  --Navigation-Burger-Menu: 0;
  --Navigation-Nav-Items: 1;
  --Components-Card-Gap: 8px;
  --Components-Card-Padding: 40px;
  --Components-Icon-Height: 24px;
  --Components-Indicator-Height: 48px;
  --Components-Max-Width: 720px;
  --Brand-25: rgb(255, 247, 235);
  --Brand-50: rgb(255, 240, 217);
  --Brand-100: rgb(252, 232, 194);
  --Brand-200: rgb(252, 222, 166);
  --Brand-300: rgb(252, 209, 135);
  --Brand-400: rgb(250, 199, 107);
  --Brand-500: rgb(250, 184, 66);
  --Brand-600: rgb(224, 145, 5);
  --Brand-700: rgb(173, 112, 5);
  --Brand-800: rgb(125, 79, 3);
  --Brand-900: rgb(99, 64, 3);
  --Brand-950: rgb(51, 33, 0);
  --Brand-Card: rgb(255, 247, 235);
  --Grey-0: rgb(255, 255, 255);
  --Grey-25: rgb(240, 240, 240);
  --Grey-50: rgb(235, 235, 237);
  --Grey-100: rgb(224, 224, 227);
  --Grey-200: rgb(209, 209, 214);
  --Grey-300: rgb(194, 194, 199);
  --Grey-400: rgb(181, 181, 184);
  --Grey-500: rgb(156, 156, 161);
  --Grey-600: rgb(115, 115, 120);
  --Grey-700: rgb(92, 92, 97);
  --Grey-800: rgb(69, 69, 74);
  --Grey-900: rgb(54, 54, 56);
  --Grey-950: rgb(38, 38, 41);
  --Grey-999: rgb(0, 0, 0);
  --Grey-Overlay: rgba(0, 0, 0, 0.3);
  --Success-25: rgb(232, 247, 242);
  --Success-50: rgb(217, 242, 235);
  --Success-100: rgb(201, 237, 224);
  --Success-200: rgb(179, 230, 212);
  --Success-300: rgb(156, 222, 199);
  --Success-400: rgb(117, 209, 179);
  --Success-500: rgb(61, 184, 143);
  --Success-600: rgb(43, 130, 102);
  --Success-700: rgb(31, 92, 71);
  --Success-800: rgb(23, 69, 54);
  --Success-900: rgb(15, 46, 36);
  --Success-950: rgb(10, 33, 28);
  --Warning-25: rgb(252, 242, 237);
  --Warning-50: rgb(252, 232, 217);
  --Warning-100: rgb(250, 219, 199);
  --Warning-200: rgb(247, 201, 171);
  --Warning-300: rgb(245, 181, 138);
  --Warning-400: rgb(242, 150, 89);
  --Warning-500: rgb(237, 120, 43);
  --Warning-600: rgb(207, 92, 18);
  --Warning-700: rgb(171, 77, 13);
  --Warning-800: rgb(140, 64, 10);
  --Warning-900: rgb(112, 51, 10);
  --Warning-950: rgb(74, 33, 5);
  --Error-25: rgb(252, 240, 237);
  --Error-50: rgb(252, 227, 217);
  --Error-100: rgb(250, 209, 194);
  --Error-200: rgb(247, 181, 161);
  --Error-300: rgb(242, 143, 112);
  --Error-400: rgb(240, 99, 56);
  --Error-500: rgb(212, 64, 18);
  --Error-600: rgb(179, 54, 15);
  --Error-700: rgb(145, 43, 13);
  --Error-800: rgb(117, 36, 10);
  --Error-900: rgb(94, 28, 8);
  --Error-950: rgb(71, 20, 5);
  --Shadow-Brand: rgba(99, 64, 3, 0.2);
  --Shadow-Grey: rgba(54, 54, 56, 0.2);
  --Shadow-Success: rgba(15, 46, 36, 0.2);
  --Shadow-Error: rgba(94, 28, 8, 0.2);
  --Shadow-Warning: rgba(112, 51, 10, 0.2);
  --Shadow-Brand-focused: rgba(99, 64, 3, 0.4);
  --Shadow-Grey-focused: rgba(54, 54, 56, 0.4);
  --Shadow-Success-focused: rgba(15, 46, 36, 0.4);
  --Shadow-Error-focused: rgba(94, 28, 8, 0.4);
  --Shadow-Warning-focused: rgba(112, 51, 10, 0.4);
}

/* Collection: Responsive */
[data-Responsive="Desktop"] {
  --Layout-Breakpoint: 1440px;
  --Layout-Columns: 12;
  --Layout-Gap: 32px;
  --Layout-Padding-Sides: 112px;
  --Layout-Padding-Top: 96px;
  --Layout-Padding-Bottom: 32px;
  --Font-size-Display-L: 60px;
  --Font-size-Display-M: 48px;
  --Font-size-Display-S: 36px;
  --Font-size-Display-XS: 30px;
  --Font-size-Text-L: 20px;
  --Font-size-Text-M: 18px;
  --Font-size-Text-S: 16px;
  --Font-size-Text-XS: 14px;
  --Line-height-Display-L: 72px;
  --Line-height-Display-M: 60px;
  --Line-height-Display-S: 44px;
  --Line-height-Display-XS: 38px;
  --Line-height-Text-L: 30px;
  --Line-height-Text-M: 28px;
  --Line-height-Text-S: 24px;
  --Line-height-Text-XS: 20px;
  --Navigation-Logo-Height: 48px;
  --Navigation-Icon-Height: 32px;
  --Navigation-Burger-Menu: 0;
  --Navigation-Nav-Items: 1;
  --Components-Card-Gap: 8px;
  --Components-Card-Padding: 40px;
  --Components-Icon-Height: 24px;
  --Components-Indicator-Height: 48px;
  --Components-Max-Width: 720px;
}

[data-Responsive="Tablet"] {
  --Layout-Breakpoint: 768px;
  --Layout-Columns: 8;
  --Layout-Gap: 24px;
  --Layout-Padding-Sides: 32px;
  --Layout-Padding-Top: 96px;
  --Layout-Padding-Bottom: 32px;
  --Font-size-Display-L: 48px;
  --Font-size-Display-M: 36px;
  --Font-size-Display-S: 30px;
  --Font-size-Display-XS: 24px;
  --Font-size-Text-L: 20px;
  --Font-size-Text-M: 18px;
  --Font-size-Text-S: 16px;
  --Font-size-Text-XS: 14px;
  --Line-height-Display-L: 60px;
  --Line-height-Display-M: 44px;
  --Line-height-Display-S: 38px;
  --Line-height-Display-XS: 32px;
  --Line-height-Text-L: 30px;
  --Line-height-Text-M: 28px;
  --Line-height-Text-S: 24px;
  --Line-height-Text-XS: 20px;
  --Navigation-Logo-Height: 48px;
  --Navigation-Icon-Height: 32px;
  --Navigation-Burger-Menu: 1;
  --Navigation-Nav-Items: 0;
  --Components-Card-Gap: 8px;
  --Components-Card-Padding: 32px;
  --Components-Icon-Height: 24px;
  --Components-Indicator-Height: 48px;
  --Components-Max-Width: 720px;
}

[data-Responsive="Mobile"] {
  --Layout-Breakpoint: 480px;
  --Layout-Columns: 4;
  --Layout-Gap: 16px;
  --Layout-Padding-Sides: 16px;
  --Layout-Padding-Top: 56px;
  --Layout-Padding-Bottom: 32px;
  --Font-size-Display-L: 36px;
  --Font-size-Display-M: 30px;
  --Font-size-Display-S: 24px;
  --Font-size-Display-XS: 20px;
  --Font-size-Text-L: 18px;
  --Font-size-Text-M: 16px;
  --Font-size-Text-S: 14px;
  --Font-size-Text-XS: 12px;
  --Line-height-Display-L: 44px;
  --Line-height-Display-M: 38px;
  --Line-height-Display-S: 32px;
  --Line-height-Display-XS: 30px;
  --Line-height-Text-L: 28px;
  --Line-height-Text-M: 24px;
  --Line-height-Text-S: 20px;
  --Line-height-Text-XS: 18px;
  --Navigation-Logo-Height: 48px;
  --Navigation-Icon-Height: 32px;
  --Navigation-Burger-Menu: 1;
  --Navigation-Nav-Items: 0;
  --Components-Card-Gap: 24px;
  --Components-Card-Padding: 24px;
  --Components-Icon-Height: 20px;
  --Components-Indicator-Height: 40px;
  --Components-Max-Width: 448px;
}

/* Collection: Colour */
[data-Colour="Light"] {
  --Brand-25: rgb(255, 247, 235);
  --Brand-50: rgb(255, 240, 217);
  --Brand-100: rgb(252, 232, 194);
  --Brand-200: rgb(252, 222, 166);
  --Brand-300: rgb(252, 209, 135);
  --Brand-400: rgb(250, 199, 107);
  --Brand-500: rgb(250, 184, 66);
  --Brand-600: rgb(224, 145, 5);
  --Brand-700: rgb(173, 112, 5);
  --Brand-800: rgb(125, 79, 3);
  --Brand-900: rgb(99, 64, 3);
  --Brand-950: rgb(51, 33, 0);
  --Brand-Card: rgb(255, 247, 235);
  --Grey-0: rgb(255, 255, 255);
  --Grey-25: rgb(240, 240, 240);
  --Grey-50: rgb(235, 235, 237);
  --Grey-100: rgb(224, 224, 227);
  --Grey-200: rgb(209, 209, 214);
  --Grey-300: rgb(194, 194, 199);
  --Grey-400: rgb(181, 181, 184);
  --Grey-500: rgb(156, 156, 161);
  --Grey-600: rgb(115, 115, 120);
  --Grey-700: rgb(92, 92, 97);
  --Grey-800: rgb(69, 69, 74);
  --Grey-900: rgb(54, 54, 56);
  --Grey-950: rgb(38, 38, 41);
  --Grey-999: rgb(0, 0, 0);
  --Grey-Overlay: rgba(0, 0, 0, 0.3);
  --Success-25: rgb(232, 247, 242);
  --Success-50: rgb(217, 242, 235);
  --Success-100: rgb(201, 237, 224);
  --Success-200: rgb(179, 230, 212);
  --Success-300: rgb(156, 222, 199);
  --Success-400: rgb(117, 209, 179);
  --Success-500: rgb(61, 184, 143);
  --Success-600: rgb(43, 130, 102);
  --Success-700: rgb(31, 92, 71);
  --Success-800: rgb(23, 69, 54);
  --Success-900: rgb(15, 46, 36);
  --Success-950: rgb(10, 33, 28);
  --Warning-25: rgb(252, 242, 237);
  --Warning-50: rgb(252, 232, 217);
  --Warning-100: rgb(250, 219, 199);
  --Warning-200: rgb(247, 201, 171);
  --Warning-300: rgb(245, 181, 138);
  --Warning-400: rgb(242, 150, 89);
  --Warning-500: rgb(237, 120, 43);
  --Warning-600: rgb(207, 92, 18);
  --Warning-700: rgb(171, 77, 13);
  --Warning-800: rgb(140, 64, 10);
  --Warning-900: rgb(112, 51, 10);
  --Warning-950: rgb(74, 33, 5);
  --Error-25: rgb(252, 240, 237);
  --Error-50: rgb(252, 227, 217);
  --Error-100: rgb(250, 209, 194);
  --Error-200: rgb(247, 181, 161);
  --Error-300: rgb(242, 143, 112);
  --Error-400: rgb(240, 99, 56);
  --Error-500: rgb(212, 64, 18);
  --Error-600: rgb(179, 54, 15);
  --Error-700: rgb(145, 43, 13);
  --Error-800: rgb(117, 36, 10);
  --Error-900: rgb(94, 28, 8);
  --Error-950: rgb(71, 20, 5);
  --Shadow-Brand: rgba(99, 64, 3, 0.2);
  --Shadow-Grey: rgba(54, 54, 56, 0.2);
  --Shadow-Success: rgba(15, 46, 36, 0.2);
  --Shadow-Error: rgba(94, 28, 8, 0.2);
  --Shadow-Warning: rgba(112, 51, 10, 0.2);
  --Shadow-Brand-focused: rgba(99, 64, 3, 0.4);
  --Shadow-Grey-focused: rgba(54, 54, 56, 0.4);
  --Shadow-Success-focused: rgba(15, 46, 36, 0.4);
  --Shadow-Error-focused: rgba(94, 28, 8, 0.4);
  --Shadow-Warning-focused: rgba(112, 51, 10, 0.4);
}

[data-Colour="Dark"] {
  --Brand-25: rgb(38, 28, 10);
  --Brand-50: rgb(51, 33, 0);
  --Brand-100: rgb(99, 64, 3);
  --Brand-200: rgb(125, 79, 3);
  --Brand-300: rgb(173, 112, 5);
  --Brand-400: rgb(224, 145, 5);
  --Brand-500: rgb(250, 184, 66);
  --Brand-600: rgb(250, 199, 107);
  --Brand-700: rgb(252, 209, 135);
  --Brand-800: rgb(252, 222, 166);
  --Brand-900: rgb(252, 232, 194);
  --Brand-950: rgb(255, 240, 217);
  --Brand-Card: rgb(38, 38, 41);
  --Grey-0: rgb(0, 0, 0);
  --Grey-25: rgb(23, 23, 23);
  --Grey-50: rgb(38, 38, 41);
  --Grey-100: rgb(54, 54, 56);
  --Grey-200: rgb(69, 69, 74);
  --Grey-300: rgb(92, 92, 97);
  --Grey-400: rgb(115, 115, 120);
  --Grey-500: rgb(156, 156, 161);
  --Grey-600: rgb(181, 181, 184);
  --Grey-700: rgb(194, 194, 199);
  --Grey-800: rgb(209, 209, 214);
  --Grey-900: rgb(224, 224, 227);
  --Grey-950: rgb(235, 235, 237);
  --Grey-999: rgb(255, 255, 255);
  --Grey-Overlay: rgba(255, 255, 255, 0.3);
  --Success-25: rgb(10, 28, 20);
  --Success-50: rgb(10, 33, 28);
  --Success-100: rgb(15, 46, 36);
  --Success-200: rgb(23, 69, 54);
  --Success-300: rgb(31, 92, 71);
  --Success-400: rgb(43, 130, 102);
  --Success-500: rgb(61, 184, 143);
  --Success-600: rgb(117, 209, 179);
  --Success-700: rgb(156, 222, 199);
  --Success-800: rgb(179, 230, 212);
  --Success-900: rgb(201, 237, 224);
  --Success-950: rgb(217, 242, 235);
  --Warning-25: rgb(46, 20, 5);
  --Warning-50: rgb(74, 33, 5);
  --Warning-100: rgb(112, 51, 10);
  --Warning-200: rgb(140, 64, 10);
  --Warning-300: rgb(171, 77, 13);
  --Warning-400: rgb(207, 92, 18);
  --Warning-500: rgb(237, 120, 43);
  --Warning-600: rgb(242, 150, 89);
  --Warning-700: rgb(245, 181, 138);
  --Warning-800: rgb(247, 201, 171);
  --Warning-900: rgb(250, 219, 199);
  --Warning-950: rgb(252, 232, 217);
  --Error-25: rgb(46, 13, 5);
  --Error-50: rgb(71, 20, 5);
  --Error-100: rgb(94, 28, 8);
  --Error-200: rgb(117, 36, 10);
  --Error-300: rgb(145, 43, 13);
  --Error-400: rgb(179, 54, 15);
  --Error-500: rgb(212, 64, 18);
  --Error-600: rgb(240, 99, 56);
  --Error-700: rgb(242, 143, 112);
  --Error-800: rgb(247, 181, 161);
  --Error-900: rgb(250, 209, 194);
  --Error-950: rgb(252, 227, 217);
  --Shadow-Brand: rgba(252, 232, 194, 0.2);
  --Shadow-Grey: rgba(224, 224, 227, 0.2);
  --Shadow-Success: rgba(201, 237, 224, 0.2);
  --Shadow-Error: rgba(250, 209, 194, 0.2);
  --Shadow-Warning: rgba(250, 219, 199, 0.2);
  --Shadow-Brand-focused: rgba(252, 232, 194, 0.4);
  --Shadow-Grey-focused: rgba(224, 224, 227, 0.4);
  --Shadow-Success-focused: rgba(201, 237, 224, 0.4);
  --Shadow-Error-focused: rgba(250, 209, 194, 0.4);
  --Shadow-Warning-focused: rgba(250, 219, 199, 0.4);
}

/* CSS Custom Property Validation */
@supports (color: var(--test)) {
  /* Modern browsers with CSS custom property support */
  .css-variables-supported {
    display: block;
  }
}

@supports not (color: var(--test)) {
  /* Fallback for older browsers */
  .css-variables-not-supported {
    display: block;
  }
  .css-variables-supported {
    display: none;
  }
}