/* Global — raw colour palette, scales, type-weight globals */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Do not use these directly in components. Reference semantic tokens. */

:root {
  --ui-alpha-white-heavy: rgba(255, 255, 255, 0.8);
  --ui-alpha-white-none: rgba(255, 255, 255, 0);
  --ui-white-0: rgb(255, 255, 255);
  --ui-grey-900: rgb(82, 80, 80);
  --ui-green-800: rgb(0, 102, 55);
  --ui-blue-600: rgb(7, 112, 207);
  --ui-red-600: rgb(208, 19, 69);
  --ui-black-0: rgb(0, 0, 0);
  --ui-black-200: rgb(45, 45, 45);
  --ui-grey-800: rgb(102, 102, 102);
  --ui-grey-700: rgb(118, 118, 118);
  --ui-grey-600: rgb(141, 141, 141);
  --ui-grey-300: rgb(221, 221, 221);
  --ui-grey-200: rgb(238, 238, 238);
  --ui-grey-100: rgb(248, 248, 248);
  --ui-green-600: rgb(1, 136, 73);
  --ui-green-100: rgb(204, 238, 222);
  --ui-blue-100: rgb(205, 226, 245);
  --ui-red-100: rgb(250, 231, 236);
  --ui-scale-400: 16px;
  --ui-scale-100: 4px;
  --ui-scale-350: 14px;
  --ui-scale-50: 2px;
  --ui-scale-1400: 100;
  --ui-scale-300: 12px;
  --ui-scale-1280: 80px;
  --ui-scale-200: 8px;
  --ui-scale-25: 1px;
  --ui-scale-250: 10px;
  --ui-scale-1200: 60px;
  --ui-scale-1000: 48px;
  --ui-scale-850: 36px;
  --ui-scale-900: 40px;
  --ui-scale-800: 32px;
  --ui-scale-700: 28px;
  --ui-scale-500: 20px;
  --ui-scale-600: 24px;
  --ui-scale-450: 18px;
  --ui-scale-950: 44px;
  --ui-purple-900: rgb(79, 65, 197);
  --ui-purple-700: rgb(111, 92, 255);
  --ui-purple-300: rgb(151, 151, 255);
  --ui-purple-100: rgb(191, 201, 255);
  --ui-purple-50: rgb(241, 239, 255);
  --ui-amber-600: rgb(255, 156, 50);
  --ui-amber-100: rgb(255, 235, 204);
  --ui-alpha-black-heavy: rgba(45, 45, 45, 0.8);
  --ui-scale-1240: 72px;
  --ui-scale-750: 30px;
  --ui-scale-550: 22px;
  --ui-type-font-weight-regular: 400;
  --ui-type-font-weight-book: 400;
  --ui-type-font-weight-demi: 500;
  --ui-type-font-weight-heavy: 600;
  --ui-black-500: rgb(61, 61, 61);
  --ui-black-400: rgb(37, 36, 36);
  --ui-black-300: rgb(40, 40, 40);
  --ui-green-700: rgb(45, 88, 68);
  --ui-blue-400: rgb(58, 162, 255);
  --ui-alpha-black-medium: rgba(45, 45, 45, 0.6);
  --ui-alpha-black-light: rgba(45, 45, 45, 0.4);
  --ui-black-100: rgb(31, 30, 30);
  --ui-red-400: rgb(252, 52, 106);
  --ui-blue-500: rgb(19, 120, 211);
  --ui-alpha-white-light: rgba(255, 255, 255, 0.4);
  --ui-amber-500: rgb(255, 192, 102);
  --ui-green-500: rgb(54, 179, 126);
  --ui-amber-700: rgb(217, 118, 21);
  --ui-alpha-black-none: rgba(45, 45, 45, 0);
  --ui-alpha-black-x-light: rgba(45, 45, 45, 0.16);
  --ui-alpha-black-xx-light: rgba(45, 45, 45, 0.06);
  --ui-alpha-white-x-light: rgba(255, 255, 255, 0.16);
  --ui-alpha-white-xx-light: rgba(255, 255, 255, 0.06);
  --ui-alpha-white-medium: rgba(255, 255, 255, 0.6);
  --ui-scale-4000: 160px;
  --ui-scale-6000: 240px;
  --ui-scale-8000: 320px;
  --ui-scale-9375: 375px;
  --ui-scale-9750: 390px;
  --ui-scale-19200: 768px;
  --ui-scale-25600: 1024px;
  --ui-scale-30000: 1200px;
  --ui-scale-36000: 1440px;
  --ui-scale-9000: 360px;
  --ui-scale-7500: 300;
  --ui-scale-15500: 620px;
  --ui-amber-650: rgb(214, 113, 0);
}

/* Alias — named colour aliases */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Do not use these directly in components. Reference semantic tokens. */

:root {
  --ui-primary-0: rgb(0, 0, 0);
  --ui-primary-200: rgb(45, 45, 45);
  --ui-secondary-0: rgb(255, 255, 255);
  --ui-neutral-900: rgb(82, 80, 80);
  --ui-neutral-800: rgb(102, 102, 102);
  --ui-neutral-700: rgb(118, 118, 118);
  --ui-neutral-600: rgb(141, 141, 141);
  --ui-neutral-300: rgb(221, 221, 221);
  --ui-neutral-200: rgb(238, 238, 238);
  --ui-neutral-100: rgb(248, 248, 248);
  --ui-accent-600: rgb(1, 136, 73);
  --ui-accent-800: rgb(0, 102, 55);
  --ui-error-600: rgb(208, 19, 69);
  --ui-error-100: rgb(250, 231, 236);
  --ui-success-600: rgb(1, 136, 73);
  --ui-success-100: rgb(204, 238, 222);
  --ui-information-600: rgb(7, 112, 207);
  --ui-information-100: rgb(205, 226, 245);
  --ui-sale-600: rgb(208, 19, 69);
  --ui-warning-600: rgb(255, 156, 50);
  --ui-warning-100: rgb(255, 235, 204);
  --ui-secondary-600: rgb(141, 141, 141);
  --ui-primary-500: rgb(61, 61, 61);
  --ui-primary-400: rgb(37, 36, 36);
  --ui-primary-300: rgb(40, 40, 40);
  --ui-secondary-300: rgb(221, 221, 221);
  --ui-accent-700: rgb(45, 88, 68);
  --ui-information-400: rgb(58, 162, 255);
  --ui-primary-100: rgb(31, 30, 30);
  --ui-error-400: rgb(252, 52, 106);
  --ui-information-500: rgb(19, 120, 211);
  --ui-warning-500: rgb(255, 192, 102);
  --ui-success-500: rgb(54, 179, 126);
  --ui-warning-700: rgb(217, 118, 21);
  --ui-warning-650: rgb(214, 113, 0);
}

/* Typography — font-size, font-weight, line-height, letter-spacing tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Base (platform-agnostic) values. Responsive overrides are in responsive.css. */

:root {
  --ui-font-size-3xs: 10px;
  --ui-font-size-sm: 16px;
  --ui-font-size-md: 18px;
  --ui-font-size-lg: 24px;
  --ui-font-size-xl: 28px;
  --ui-font-size-2xl: 36px;
  --ui-font-size-3xl: 60px;
  --ui-letter-spacing-perc-lg: 8px;
  --ui-letter-spacing-perc-md: 4px;
  --ui-letter-spacing-px-xs: 0.4px;
  --ui-letter-spacing-px-sm: 0.6px;
  --ui-letter-spacing-px-md: 0.8px;
  --ui-letter-spacing-px-lg: 1px;
  --ui-letter-spacing-px-xl: 1.2px;
  --ui-letter-spacing-px-2xl: 1.5px;
  --ui-line-height-3xs: 14px;
  --ui-line-height-lg: 24px;
  --ui-line-height-xl: 30px;
  --ui-line-height-2xl: 36px;
  --ui-line-height-3xl: 44px;
  --ui-line-height-4xl: 72px;
  --ui-font-size-xs: 14px;
  --ui-font-size-2xs: 12px;
  --ui-line-height-md: 22px;
  --ui-line-height-sm: 20px;
  --ui-line-height-2xs: 16px;
  --ui-line-height-xs: 18px;
  --ui-font-size-display-hero: 60px;
  --ui-font-size-display-lead: 36px;
  --ui-font-size-display-supporting: 28px;
  --ui-font-size-display-compact: 24px;
  --ui-font-size-headline-page-caps: 18px;
  --ui-font-size-headline-section: 16px;
  --ui-font-size-headline-subsection: 14px;
  --ui-font-size-headline-mini: 12px;
  --ui-font-size-body-paragraph: 14px;
  --ui-font-size-body-product-description: 16px;
  --ui-font-size-body-product-description-large: 18px;
  --ui-font-size-label-button: 16px;
  --ui-font-size-label-button-small: 14px;
  --ui-font-size-label-field-input: 14px;
  --ui-font-size-label-field-select: 14px;
  --ui-font-size-label-field-select-large: 16px;
  --ui-font-size-label-field-group: 14px;
  --ui-font-size-label-field-option: 16px;
  --ui-font-size-label-tag-emphasis: 12px;
  --ui-font-size-label-tag-emphasis-large: 14px;
  --ui-font-size-label-tab: 14px;
  --ui-font-size-label-tab-small: 12px;
  --ui-font-size-field-description: 16px;
  --ui-font-size-field-helper: 16px;
  --ui-font-size-field-placeholder: 16px;
  --ui-font-size-field-value: 16px;
  --ui-font-size-field-counter: 12px;
  --ui-font-size-field-helper-error: 12px;
  --ui-font-size-link-link-large: 16px;
  --ui-font-size-link-link: 14px;
  --ui-font-size-link-link-small: 12px;
  --ui-font-size-small-print-small-print: 10px;
  --ui-font-weight-display-hero: 600;
  --ui-font-weight-display-lead: 600;
  --ui-font-weight-display-supporting: 600;
  --ui-font-weight-display-compact: 600;
  --ui-font-weight-headline-page-cpas: 600;
  --ui-font-weight-headline-section: 600;
  --ui-font-weight-headline-subsection: 600;
  --ui-font-weight-headline-mini: 600;
  --ui-font-weight-body-paragraph: 400;
  --ui-font-weight-body-product-description: 600;
  --ui-font-weight-body-product-description-large: 400;
  --ui-font-weight-label-button: 600;
  --ui-font-weight-label-button-small: 600;
  --ui-font-weight-label-field-input: 600;
  --ui-font-weight-label-field-select: 600;
  --ui-font-weight-label-field-select-large: 400;
  --ui-font-weight-label-field-group: 600;
  --ui-font-weight-label-field-option: 400;
  --ui-font-weight-label-tag-emphasis: 600;
  --ui-font-weight-label-tag-emphasis-large: 600;
  --ui-font-weight-label-tab: 600;
  --ui-font-weight-label-tab-small: 600;
  --ui-font-weight-field-description: 400;
  --ui-font-weight-field-helper: 400;
  --ui-font-weight-field-helper-error: 600;
  --ui-font-weight-field-placeholder: 400;
  --ui-font-weight-field-counter: 600;
  --ui-font-weight-field-value: 400;
  --ui-font-weight-link-link: 400;
  --ui-font-weight-link-link-large: 400;
  --ui-font-weight-link-link-small: 400;
  --ui-line-height-display-hero: 72px;
  --ui-font-weight-small-print-small-print: 600;
  --ui-line-height-display-lead: 44px;
  --ui-line-height-display-supporting: 36px;
  --ui-line-height-display-compact: 30px;
  --ui-line-height-headline-page-caps: 24px;
  --ui-line-height-headline-section: 22px;
  --ui-line-height-headline-subsection: 20px;
  --ui-line-height-headline-mini: 16px;
  --ui-line-height-body-product-description-large: 24px;
  --ui-line-height-body-product-description: 22px;
  --ui-line-height-body-paragraph: 20px;
  --ui-line-height-label-button: 24px;
  --ui-line-height-label-button-small: 20px;
  --ui-line-height-label-field-input: 20px;
  --ui-line-height-label-field-select: 20px;
  --ui-line-height-label-field-select-large: 22px;
  --ui-line-height-label-field-group: 20px;
  --ui-line-height-label-field-option: 22px;
  --ui-line-height-label-tag-emphasis: 16px;
  --ui-line-height-label-tag-emphasis-large: 20px;
  --ui-line-height-label-tab: 20px;
  --ui-line-height-label-tab-small: 16px;
  --ui-line-height-field-description: 22px;
  --ui-line-height-field-helper: 22px;
  --ui-line-height-field-placeholder: 22px;
  --ui-line-height-field-counter: 16px;
  --ui-line-height-field-helper-error: 16px;
  --ui-line-height-field-value: 22px;
  --ui-line-height-link-link: 20px;
  --ui-line-height-link-link-large: 22px;
  --ui-line-height-link-link-small: 16px;
  --ui-line-height-small-print-small-print: 14px;
  --ui-letter-spacing-display-hero: 1.5px;
  --ui-letter-spacing-display-lead: 1.2px;
  --ui-letter-spacing-display-supporting: 1.2px;
  --ui-letter-spacing-display-compact: 1.2px;
  --ui-letter-spacing-headline-page-caps: 0.8px;
  --ui-letter-spacing-headline-subsection: 0.8px;
  --ui-letter-spacing-headline-section: 0.6px;
  --ui-letter-spacing-headline-mini: 1px;
  --ui-letter-spacing-body-paragraph: 0.6px;
  --ui-letter-spacing-body-product-description-large: 0.6px;
  --ui-letter-spacing-body-product-description: 0.4px;
  --ui-letter-spacing-label-button: 0.6px;
  --ui-letter-spacing-label-button-small: 0.8px;
  --ui-letter-spacing-label-field-input: 0.8px;
  --ui-letter-spacing-label-field-select: 0.8px;
  --ui-letter-spacing-label-field-select-large: 0.4px;
  --ui-letter-spacing-label-field-group: 0.8px;
  --ui-letter-spacing-label-field-option: 0.4px;
  --ui-letter-spacing-label-tag-emphasis-large: 0.8px;
  --ui-letter-spacing-label-tag-emphasis: 1px;
  --ui-letter-spacing-label-tab: 0.8px;
  --ui-letter-spacing-label-tab-small: 1px;
  --ui-letter-spacing-field-description: 0.4px;
  --ui-letter-spacing-field-helper: 0.4px;
  --ui-letter-spacing-field-placeholder: 0.4px;
  --ui-letter-spacing-field-value: 0.4px;
  --ui-letter-spacing-field-counter: 1px;
  --ui-letter-spacing-field-helper-error: 1px;
  --ui-letter-spacing-link-link: 0.6px;
  --ui-letter-spacing-link-link-large: 0.4px;
  --ui-letter-spacing-link-link-small: 0.8px;
  --ui-letter-spacing-small-print-small-print: 1.2px;
  --ui-font-size-label-button-description: 14px;
  --ui-font-weight-label-button-description: 400;
  --ui-line-height-label-button-description: 20px;
  --ui-letter-spacing-label-button-description: 0.4px;
  --ui-font-size-label-status: 14px;
  --ui-font-size-label-status-small: 10px;
  --ui-font-weight-label-status: 600;
  --ui-font-weight-label-status-small: 600;
  --ui-line-height-label-status: 20px;
  --ui-line-height-label-status-small: 14px;
  --ui-letter-spacing-label-status: 0.8px;
  --ui-letter-spacing-label-status-small: 1.2px;
  --ui-font-size-body-paragraph-large: 16px;
  --ui-font-weight-body-paragraph-large: 400;
  --ui-line-height-body-paragraph-large: 22px;
  --ui-letter-spacing-body-paragraph-large: 0.6px;
  --ui-font-size-label-accordion: 16px;
  --ui-font-weight-label-accordion: 600;
  --ui-line-height-label-accordion: 22px;
  --ui-letter-spacing-label-accordion: 0.4px;
  --ui-font-size-body-paragraph-small: 12px;
  --ui-font-weight-body-paragraph-small: 400;
  --ui-line-height-body-paragraph-small: 16px;
  --ui-letter-spacing-body-paragraph-small: 0.8px;
  --ui-line-height-body-paragraph-bold: 20px;
  --ui-letter-spacing-body-paragraph-bold: 0.6px;
  --ui-font-weight-body-paragraph-bold: 600;
  --ui-font-size-body-paragraph-bold: 14px;
  --ui-font-size-label-tag-large: 14px;
  --ui-font-weight-label-tag-large: 600;
  --ui-line-height-label-tag-large: 20px;
  --ui-letter-spacing-label-tag-large: 0.8px;
  --ui-font-size-headline-page: 18px;
  --ui-font-weight-headline-page: 600;
  --ui-line-height-headline-page: 24px;
  --ui-letter-spacing-headline-page: 0.8px;
}

/* Spacing — padding and gap tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Base (platform-agnostic) values. Responsive overrides are in responsive.css. */

:root {
  --ui-padding-button-vertical-default: 12px;
  --ui-padding-button-horizontal-default: 16px;
  --ui-padding-button-vertical-small: 4px;
  --ui-padding-button-vertical-medium: 8px;
  --ui-padding-button-horizontal-medium: 8px;
  --ui-padding-button-horizontal-small: 8px;
  --ui-padding-button-horizontal-large: 16px;
  --ui-padding-button-vertical-large: 16px;
  --ui-gap-horizontal-xx-large: 32px;
  --ui-gap-horizontal-x-large: 24px;
  --ui-gap-horizontal-large: 16px;
  --ui-gap-horizontal-small: 8px;
  --ui-gap-horizontal-x-small: 4px;
  --ui-gap-horizontal-medium: 12px;
  --ui-gap-vertical-xx-large: 32px;
  --ui-gap-vertical-x-large: 24px;
  --ui-gap-vertical-large: 16px;
  --ui-gap-vertical-medium: 12px;
  --ui-gap-vertical-small: 8px;
  --ui-gap-vertical-x-small: 4px;
  --ui-gap-horizontal-xxx-large: 40px;
  --ui-gap-vertical-xxx-large: 40px;
  --ui-padding-select-field-horizontal-large: 16px;
  --ui-padding-select-field-horizontal-medium: 12px;
  --ui-padding-select-field-horizontal-small: 8px;
  --ui-padding-select-field-vertical-default: 16px;
  --ui-gap-vertical-xx-small: 2px;
  --ui-gap-horizontal-xx-small: 2px;
}

/* Shape — border-radius, border-width, corner-radius tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-border-width-hairline: 1px;
  --ui-border-width-thin: 2px;
  --ui-border-radius-lg: 20px;
  --ui-border-radius-round: 100px;
  --ui-border-radius-md: 12px;
  --ui-border-radius-sm: 10px;
  --ui-border-width-thick: 4px;
  --ui-shape-corner-radius-full: 100px;
  --ui-shape-corner-radius-small: 8px;
  --ui-shape-corner-radius-medium: 16px;
  --ui-shape-corner-radius-large: 24px;
  --ui-shape-corner-radius-x-small: 4px;
}

/* Elevation and shadows */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-elevation-none: rgba(45, 45, 45, 0);
  --ui-elevation-light: rgba(45, 45, 45, 0.4);
  --ui-elevation-medium: rgba(45, 45, 45, 0.6);
  --ui-elevation-heavy: rgba(45, 45, 45, 0.8);
  --ui-shadows-none: rgba(45, 45, 45, 0);
  --ui-shadows-light: rgba(45, 45, 45, 0.4);
  --ui-shadows-medium: rgba(45, 45, 45, 0.6);
  --ui-shadows-heavy: rgba(45, 45, 45, 0.8);
  --ui-shadows-x-light: rgba(45, 45, 45, 0.16);
  --ui-shadows-xx-light: rgba(45, 45, 45, 0.06);
}

/* Layout — container sizes, breakpoints, aspect ratios */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-container-max-sm: 390px;
  --ui-container-max-md: 768px;
  --ui-container-max-lg: 1024px;
  --ui-container-max-xl: 1200px;
  --ui-container-max-xs: 375px;
  --ui-breakpoint-sm: 375px;
  --ui-breakpoint-m: 390px;
  --ui-breakpoint-xl: 768px;
  --ui-breakpoint-xxl: 1024px;
  --ui-breakpoint-xxxl: 1440px;
  --ui-breakpoint-x-sm: 360px;
  --ui-breakpoint-xx-sm: 300;
  --ui-breakpoint-l: 620px;
  --ui-aspect-square: 1 / 1;
  --ui-aspect-product: 3 / 4;
  --ui-aspect-lanscape: 4 / 3;
  --ui-aspect-wide: 16 / 9;
}

/* Motion */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-motion-translate-hover-default: 4px;
}

/* Semantic — surface, text, border, icon, link tokens */
/* Values use light-dark() so they respond to the color-scheme property. */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  color-scheme: light; /* default */
  --ui-icon-base-primary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-icon-base-secondary: light-dark(rgb(102, 102, 102), rgb(102, 102, 102));
  --ui-icon-base-on-dark-adaptive: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-decision-primary: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-base-primary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-link-primary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-border-base-default: light-dark(rgb(118, 118, 118), rgb(118, 118, 118));
  --ui-text-base-secondary: light-dark(rgb(102, 102, 102), rgb(221, 221, 221));
  --ui-link-secondary: light-dark(rgb(141, 141, 141), rgb(141, 141, 141));
  --ui-border-base-subtle: light-dark(rgb(238, 238, 238), rgb(102, 102, 102));
  --ui-text-base-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-surface-base-canvas: light-dark(rgb(238, 238, 238), rgb(0, 0, 0));
  --ui-border-decision-primary: light-dark(
    rgb(118, 118, 118),
    rgb(221, 221, 221)
  );
  --ui-surface-base-raised: light-dark(rgb(255, 255, 255), rgb(31, 30, 30));
  --ui-surface-base-elevated: light-dark(rgb(248, 248, 248), rgb(45, 45, 45));
  --ui-link-accent: light-dark(rgb(7, 112, 207), rgb(58, 162, 255));
  --ui-surface-base-invert: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-decision-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-surface-base-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.6)
  );
  --ui-border-action-primary: light-dark(rgb(45, 45, 45), rgb(238, 238, 238));
  --ui-surface-decision-primary: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-surface-decision-secondary: light-dark(
    rgb(238, 238, 238),
    rgb(238, 238, 238)
  );
  --ui-surface-decision-invert: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-surface-decision-success: light-dark(
    rgb(204, 238, 222),
    rgb(204, 238, 222)
  );
  --ui-border-action-primary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(238, 238, 238)
  );
  --ui-surface-decision-error: light-dark(
    rgb(250, 231, 236),
    rgb(250, 231, 236)
  );
  --ui-surface-decision-warning: light-dark(
    rgb(255, 235, 204),
    rgb(255, 235, 204)
  );
  --ui-icon-decision-focus: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-border-action-accent-primary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(0, 102, 55)
  );
  --ui-surface-decision-neutral: light-dark(
    rgb(205, 226, 245),
    rgb(205, 226, 245)
  );
  --ui-icon-decision-pressed: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-surface-decision-information: light-dark(
    rgb(7, 112, 207),
    rgb(19, 120, 211)
  );
  --ui-icon-decision-secondary: light-dark(
    rgb(102, 102, 102),
    rgb(102, 102, 102)
  );
  --ui-surface-action-primary: light-dark(rgb(45, 45, 45), rgb(238, 238, 238));
  --ui-icon-decision-on-dark: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-surface-action-primary-hover: light-dark(
    rgb(0, 0, 0),
    rgb(221, 221, 221)
  );
  --ui-icon-decision-disabled: light-dark(
    rgb(238, 238, 238),
    rgb(238, 238, 238)
  );
  --ui-text-decision-primary: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-surface-action-accent-primary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-text-decision-secondary: light-dark(
    rgb(118, 118, 118),
    rgb(221, 221, 221)
  );
  --ui-surface-action-accent-primary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(45, 88, 68)
  );
  --ui-surface-action-secondary: light-dark(
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0)
  );
  --ui-border-decision-invert: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-surface-action-secondary-hover: light-dark(
    rgb(248, 248, 248),
    rgba(255, 255, 255, 0)
  );
  --ui-surface-action-disabled: light-dark(
    rgb(238, 238, 238),
    rgba(45, 45, 45, 0.4)
  );
  --ui-border-decision-focus: light-dark(rgb(7, 112, 207), rgb(19, 120, 211));
  --ui-border-action-accent-primary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-border-action-secondary: light-dark(
    rgb(221, 221, 221),
    rgb(255, 255, 255)
  );
  --ui-text-action-primary: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-border-action-secondary-hover: light-dark(
    rgb(221, 221, 221),
    rgb(221, 221, 221)
  );
  --ui-border-action-disabled: light-dark(rgb(221, 221, 221), rgb(82, 80, 80));
  --ui-text-decision-error: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-text-decision-sale: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-text-decision-disabled: light-dark(
    rgb(238, 238, 238),
    rgb(141, 141, 141)
  );
  --ui-text-action-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(61, 61, 61)
  );
  --ui-text-action-accent-primary: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-text-action-disabled: light-dark(rgb(221, 221, 221), rgb(118, 118, 118));
  --ui-text-base-accent: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-border-decision-secondary: light-dark(
    rgb(221, 221, 221),
    rgb(82, 80, 80)
  );
  --ui-surface-decision-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.8)
  );
  --ui-surface-decision-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  --ui-text-action-secondary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-action-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-secondary: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-border-action-accent-secondary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-border-action-accent-secondary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(0, 102, 55)
  );
  --ui-surface-action-accent-secondary: light-dark(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  --ui-surface-action-accent-secondary-hover: light-dark(
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0)
  );
  --ui-icon-action-primary: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-icon-action-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-secondary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-icon-action-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-primary: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-secondary: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-disabled: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-border-base-invert: light-dark(rgb(255, 255, 255), rgb(255, 255, 255));
  --ui-icon-decision-error: light-dark(rgb(208, 19, 69), rgb(208, 19, 69));
  --ui-icon-decision-success: light-dark(rgb(1, 136, 73), rgb(1, 136, 73));
  --ui-surface-action-tertiary: light-dark(
    rgb(221, 221, 221),
    rgba(45, 45, 45, 0.8)
  );
  --ui-text-action-tertiary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-action-tertiary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-surface-action-tertiary-hover: light-dark(
    rgb(221, 221, 221),
    rgba(45, 45, 45, 0.8)
  );
  --ui-icon-action-tertiary: light-dark(rgb(45, 45, 45), rgb(61, 61, 61));
  --ui-icon-action-tertiary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-border-action-tertiary: light-dark(
    rgb(221, 221, 221),
    rgb(102, 102, 102)
  );
  --ui-border-action-tertiary-hover: light-dark(
    rgb(221, 221, 221),
    rgb(102, 102, 102)
  );
  --ui-border-decision-error: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-link-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-text-base-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-base-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-decision-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-decision-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-icon-base-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-icon-base-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-icon-decision-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-icon-decision-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-base-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-icon-base-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-icon-decision-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-text-decision-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-link-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-link-on-dark-fixed: light-dark(rgb(255, 255, 255), rgb(255, 255, 255));
  --ui-surface-backdrop-light: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.6)
  );
  --ui-surface-backdrop-dark: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.4)
  );
  --ui-border-base-strong: light-dark(rgb(102, 102, 102), rgb(141, 141, 141));
  --ui-icon-base-invert-surface: light-dark(
    rgb(255, 255, 255),
    rgb(45, 45, 45)
  );
  --ui-text-decision-warning-light: light-dark(
    rgb(255, 156, 50),
    rgb(255, 192, 102)
  );
  --ui-text-decision-success: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-border-decision-warning: light-dark(
    rgb(214, 113, 0),
    rgb(255, 192, 102)
  );
  --ui-border-decision-success: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-surface-base-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  --ui-surface-action-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  --ui-surface-action-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgb(61, 61, 61)
  );
  --ui-text-decision-warning-dark: light-dark(
    rgb(214, 113, 0),
    rgb(255, 192, 102)
  );
  --ui-border-base-muted: light-dark(rgb(221, 221, 221), rgb(102, 102, 102));
  --ui-surface-base-black-fixed: light-dark(rgb(0, 0, 0), rgb(0, 0, 0));
  --ui-surface-base-grey-fixed: light-dark(rgb(82, 80, 80), rgb(82, 80, 80));
  --ui-surface-base-white-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-surface-base-loading: light-dark(rgb(221, 221, 221), rgb(31, 30, 30));
  --ui-text-action-pill: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-border-action-pill: light-dark(rgb(221, 221, 221), rgb(118, 118, 118));
  --ui-surface-action-pill: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
}

/* Flip to dark when the OS/browser preference is dark. */
/* Override on any element with: color-scheme: light | dark */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Chameleon UI — responsive token overrides */
/* Overrides core token values for mWeb (≤620px) and dWeb (>620px). */
/* Included automatically by core.css — do not import separately. */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

/* No mWeb/dWeb overrides differ from the base values in this Thread DS version. */

/* @asosteam/chameleon-tokens-asos/css-variables.css
 * All Thread DS design tokens as CSS custom properties.
 *
 * Global stylesheet — not a CSS Module, no default export.
 * From CSS:   @import "@asosteam/chameleon-tokens-asos/css-variables.css";
 * From JS/TS: import "@asosteam/chameleon-tokens-asos/css-variables.css";
 *
 * Individual files in ./css-variables/ are managed by:
 *   npm run sync-tokens
 */

/* Page-scoped aliases onto Chameleon tokens (@asosteam/chameleon-tokens-asos).
   Values verified against node_modules/@asosteam/chameleon-tokens-asos/css-variables/*.css.
   Only the exact-match subset actually consumed by premier-cancellation is aliased here. */

/* Suppress dark mode: force color-scheme:light */
:root:root {
  color-scheme: light;
}

/* Colour aliases use the semantic (light-dark()) layer; dark mode is neutralised above so
   these always resolve to their light value. */
:root {
  --pc-color-text-primary: var(--ui-text-base-primary); /* light #2d2d2d / dark #dddddd */
  --pc-color-text-secondary: var(--ui-text-decision-secondary); /* light #767676 / dark #dddddd */
  --pc-color-border-default: var(--ui-border-base-default); /* #767676 both modes (Chameleon gap: no dark variant yet) */
  --pc-color-border-error: var(--ui-border-decision-error); /* light #d01345 / dark #fc346a */
  --pc-color-surface-canvas: var(--ui-surface-base-canvas); /* light #eeeeee / dark #000000 */
  --pc-color-surface-raised: var(--ui-surface-base-raised); /* light #ffffff / dark #1f1e1e */
  --pc-color-surface-error: var(--ui-surface-decision-error); /* #fae7ec both modes (Chameleon gap: no dark variant yet) */

  --pc-spacing-200: var(--ui-scale-200); /* 8px */
  --pc-spacing-250: var(--ui-scale-250); /* 10px */
  --pc-spacing-300: var(--ui-scale-300); /* 12px */
  --pc-spacing-350: var(--ui-scale-350); /* 14px */
  --pc-spacing-400: var(--ui-scale-400); /* 16px */
  --pc-spacing-600: var(--ui-scale-600); /* 24px */
  --pc-spacing-700: var(--ui-scale-700); /* 28px */
  --pc-spacing-800: var(--ui-scale-800); /* 32px */

  --pc-border-width-hairline: var(--ui-border-width-hairline); /* 1px */

  --pc-font-size-2xs: var(--ui-font-size-2xs); /* 12px */
  --pc-font-size-xs: var(--ui-font-size-xs); /* 14px */
  --pc-font-size-sm: var(--ui-font-size-sm); /* 16px */

  --pc-line-height-2xs: var(--ui-line-height-2xs); /* 16px */
  --pc-line-height-xs: var(--ui-line-height-xs); /* 18px */
  --pc-line-height-sm: var(--ui-line-height-sm); /* 20px */
  --pc-line-height-md: var(--ui-line-height-md); /* 22px */
  --pc-line-height-3xl: var(--ui-line-height-3xl); /* 44px */

  --pc-letter-spacing-xs: var(--ui-letter-spacing-px-xs); /* 0.4px */
  --pc-letter-spacing-sm: var(--ui-letter-spacing-px-sm); /* 0.6px */
  --pc-letter-spacing-md: var(--ui-letter-spacing-px-md); /* 0.8px */
  --pc-letter-spacing-xl: var(--ui-letter-spacing-px-xl); /* 1.2px */
}

/*
  button.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 334:1157).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: button | Label/Button */
  --button-font-family: "futura-pt", sans-serif;
  --button-font-size: var(--ui-font-size-label-button, 16px);
  --button-font-weight: var(--ui-font-weight-label-button, 600);
  --button-line-height: var(--ui-line-height-label-button, 24px);
  --button-letter-spacing: var(--ui-letter-spacing-label-button, 0.6px);
  /* @end-chameleon-typography */

  /* Spacing */
  --button-padding-vertical: var(--ui-padding-button-vertical-default, 12px);
  --button-padding-horizontal: var(
    --ui-padding-button-horizontal-default,
    16px
  );

  /* Primary */
  --button-surface-primary: var(--ui-surface-action-primary, #2d2d2d);
  --button-text-primary: var(--ui-text-action-primary, #ffffff);
  --button-surface-primary-hover: var(
    --ui-surface-action-primary-hover,
    #000000
  );
  --button-text-primary-hover: var(--ui-text-action-primary-hover, #ffffff);

  /* Secondary */
  --button-surface-secondary: var(--ui-surface-action-secondary, #ffffff);
  --button-text-secondary: var(--ui-text-action-secondary, #2d2d2d);
  --button-border-secondary: var(--ui-border-action-secondary, #dddddd);
  --button-surface-secondary-hover: var(
    --ui-surface-action-secondary-hover,
    #f8f8f8
  );
  --button-text-secondary-hover: var(--ui-text-action-secondary-hover, #2d2d2d);
  --button-border-secondary-hover: var(
    --ui-border-action-secondary-hover,
    #dddddd
  );

  /* Tertiary */
  --button-surface-tertiary: var(--ui-surface-action-tertiary, #dddddd);
  --button-text-tertiary: var(--ui-text-action-tertiary, #2d2d2d);
  --button-border-tertiary: var(--ui-border-action-tertiary, #dddddd);
  --button-surface-tertiary-hover: var(
    --ui-surface-action-tertiary-hover,
    #dddddd
  );
  --button-text-tertiary-hover: var(--ui-text-action-tertiary-hover, #2d2d2d);
  --button-border-tertiary-hover: var(
    --ui-border-action-tertiary-hover,
    #dddddd
  );

  /* Accent Primary */
  --button-surface-accent-primary: var(
    --ui-surface-action-accent-primary,
    #018849
  );
  --button-text-accent-primary: var(--ui-text-action-accent-primary, #ffffff);
  --button-surface-accent-primary-hover: var(
    --ui-surface-action-accent-primary-hover,
    #006637
  );
  --button-text-accent-primary-hover: var(
    --ui-text-action-accent-primary-hover,
    #ffffff
  );

  /* Accent Secondary */
  --button-surface-accent-secondary: var(
    --ui-surface-action-accent-secondary,
    transparent
  );
  --button-text-accent-secondary: var(
    --ui-text-action-accent-secondary,
    #2d2d2d
  );
  --button-border-accent-secondary: var(
    --ui-border-action-accent-secondary,
    #018849
  );
  --button-surface-accent-secondary-hover: var(
    --ui-surface-action-accent-secondary-hover,
    #ffffff
  );
  --button-text-accent-secondary-hover: var(
    --ui-text-action-accent-secondary-hover,
    #2d2d2d
  );
  --button-border-accent-secondary-hover: var(
    --ui-border-action-accent-secondary-hover,
    #006637
  );

  /* Disabled */
  --button-surface-disabled: var(--ui-surface-action-disabled, #eeeeee);
  --button-text-disabled: var(--ui-text-action-disabled, #dddddd);

  /* Pill */
  --button-surface-pill: var(--ui-surface-action-pill, #ffffff);
  --button-text-pill: var(--ui-text-action-pill, #2d2d2d);
  --button-border-pill: var(--ui-border-action-pill, #dddddd);
  --button-border-radius-pill: var(--ui-border-radius-lg, 20px);
  --button-padding-vertical-pill: 8px;
  --button-padding-horizontal-pill: var(
    --ui-padding-button-horizontal-default,
    16px
  );

  /* @chameleon-typography: button-pill | Label/Button Small */
  --button-pill-font-family: "futura-pt", sans-serif;
  --button-pill-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-pill-font-weight: var(--ui-font-weight-label-button-small, 600);
  --button-pill-line-height: var(--ui-line-height-label-button-small, 20px);
  --button-pill-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );
  /* @end-chameleon-typography */

  /* Size: Large */
  --button-size-large-padding-h: var(
    --ui-padding-button-horizontal-large,
    16px
  );
  --button-size-large-padding-v: var(--ui-padding-button-vertical-large, 16px);
  --button-size-large-font-size: var(--ui-font-size-label-button, 16px);
  --button-size-large-line-height: var(--ui-line-height-label-button, 24px);
  --button-size-large-letter-spacing: var(
    --ui-letter-spacing-label-button,
    0.6px
  );

  /* Size: Medium */
  --button-size-medium-padding-h: var(
    --ui-padding-button-horizontal-medium,
    8px
  );
  --button-size-medium-padding-v: var(--ui-padding-button-vertical-medium, 8px);
  --button-size-medium-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-size-medium-line-height: var(
    --ui-line-height-label-button-small,
    20px
  );
  --button-size-medium-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );

  /* Size: Small */
  --button-size-small-padding-h: var(--ui-padding-button-horizontal-small, 8px);
  --button-size-small-padding-v: var(--ui-padding-button-vertical-small, 4px);
  --button-size-small-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-size-small-line-height: var(
    --ui-line-height-label-button-small,
    20px
  );
  --button-size-small-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );
}

/* Base layout and typography */

.button-module_root__G0cQu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box;
  min-width: 288px;
}

.button-module_root__G0cQu:disabled {
  cursor: not-allowed;
  background-color: var(--button-surface-disabled);
  color: var(--button-text-disabled);
  border-color: transparent;
}

/* Primary */

.button-module_primary__rOfeb {
  background-color: var(--button-surface-primary);
  color: var(--button-text-primary);
}

.button-module_primary__rOfeb:not(:disabled):hover {
  background-color: var(--button-surface-primary-hover);
  color: var(--button-text-primary-hover);
}

/* Secondary */

.button-module_secondary__yleAU {
  background-color: var(--button-surface-secondary);
  color: var(--button-text-secondary);
  border-color: var(--button-border-secondary);
}

.button-module_secondary__yleAU:not(:disabled):hover {
  background-color: var(--button-surface-secondary-hover);
  color: var(--button-text-secondary-hover);
  border-color: var(--button-border-secondary-hover);
}

/* Tertiary */

.button-module_tertiary__H-jYs {
  background-color: var(--button-surface-tertiary);
  color: var(--button-text-tertiary);
}

.button-module_tertiary__H-jYs:not(:disabled):hover {
  background-color: var(--button-surface-tertiary-hover);
  color: var(--button-text-tertiary-hover);
}

/* Accent Primary */

.button-module_accentPrimary__6zvcj {
  background-color: var(--button-surface-accent-primary);
  color: var(--button-text-accent-primary);
}

.button-module_accentPrimary__6zvcj:not(:disabled):hover {
  background-color: var(--button-surface-accent-primary-hover);
  color: var(--button-text-accent-primary-hover);
}

/* Accent Secondary */

.button-module_accentSecondary__ASjkw {
  background-color: var(--button-surface-accent-secondary);
  color: var(--button-text-accent-secondary);
  border-color: var(--button-border-accent-secondary);
}

.button-module_accentSecondary__ASjkw:not(:disabled):hover {
  background-color: var(--button-surface-accent-secondary-hover);
  color: var(--button-text-accent-secondary-hover);
  border-color: var(--button-border-accent-secondary-hover);
}

/* Pill */

.button-module_pill__wZZkF {
  background-color: var(--button-surface-pill);
  color: var(--button-text-pill);
  border-color: var(--button-border-pill);
  border-radius: var(--button-border-radius-pill);
  padding: var(--button-padding-vertical-pill)
    var(--button-padding-horizontal-pill);
  font-size: var(--button-font-size-pill);
  line-height: var(--button-line-height-pill);
  letter-spacing: var(--button-letter-spacing-pill);
  width: auto;
}

/* Size modifiers — override padding and typography from root */

.button-module_sizeLarge__3Je3R {
  padding: var(--button-size-large-padding-v) var(--button-size-large-padding-h);
  font-size: var(--button-size-large-font-size);
  line-height: var(--button-size-large-line-height);
  letter-spacing: var(--button-size-large-letter-spacing);
}

.button-module_sizeMedium__MjqHw {
  padding: var(--button-size-medium-padding-v)
    var(--button-size-medium-padding-h);
  font-size: var(--button-size-medium-font-size);
  line-height: var(--button-size-medium-line-height);
  letter-spacing: var(--button-size-medium-letter-spacing);
}

.button-module_sizeSmall__muyDC {
  padding: var(--button-size-small-padding-v) var(--button-size-small-padding-h);
  font-size: var(--button-size-small-font-size);
  line-height: var(--button-size-small-line-height);
  letter-spacing: var(--button-size-small-letter-spacing);
}

/*
  input-field.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 595:10426).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: input-field-label | Label/Field Input */
  --input-field-label-font-family: "futura-pt", sans-serif;
  --input-field-label-font-size: var(--ui-font-size-label-field-input, 12px);
  --input-field-label-font-weight: var(--ui-font-weight-label-field-input, 600);
  --input-field-label-line-height: var(
    --ui-line-height-label-field-input,
    16px
  );
  --input-field-label-letter-spacing: var(
    --ui-letter-spacing-label-field-input,
    1px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-value | Field/Value */
  --input-field-value-font-family: "futura-pt", sans-serif;
  --input-field-value-font-size: var(--ui-font-size-field-value, 16px);
  --input-field-value-font-weight: var(--ui-font-weight-field-value, 400);
  --input-field-value-line-height: var(--ui-line-height-field-value, 22px);
  --input-field-value-letter-spacing: var(
    --ui-letter-spacing-field-value,
    0.4px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-placeholder | Field/Helper */
  --input-field-placeholder-font-family: "futura-pt", sans-serif;
  --input-field-placeholder-font-size: var(--ui-font-size-field-helper, 16px);
  --input-field-placeholder-font-weight: var(
    --ui-font-weight-field-helper,
    400
  );
  --input-field-placeholder-line-height: var(
    --ui-line-height-field-helper,
    22px
  );
  --input-field-placeholder-letter-spacing: var(
    --ui-letter-spacing-field-helper,
    0.4px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-error | Field/Helper Error */
  --input-field-error-font-family: "futura-pt", sans-serif;
  --input-field-error-font-size: var(--ui-font-size-field-helper-error, 12px);
  --input-field-error-font-weight: var(
    --ui-font-weight-field-helper-error,
    600
  );
  --input-field-error-line-height: var(
    --ui-line-height-field-helper-error,
    16px
  );
  --input-field-error-letter-spacing: var(
    --ui-letter-spacing-field-helper-error,
    1px
  );
  /* @end-chameleon-typography */

  /* Layout */
  --input-field-gap: var(--ui-gap-vertical-small, 8px);
  --input-field-padding-block: var(--ui-gap-vertical-small, 8px);
  --input-field-padding-inline-start: var(--ui-gap-horizontal-medium, 12px);
  --input-field-padding-inline-end: var(
    --ui-padding-select-field-vertical-none,
    0px
  );

  /* Border */
  --input-field-border-width: 1px;
  --input-field-border: var(--ui-border-decision-primary, #767676);
  --input-field-border-focus: var(--ui-border-decision-focus, #0770cf);
  --input-field-border-error: var(--ui-border-decision-error, #d01345);

  /* Text */
  --input-field-label-color: var(--ui-text-base-secondary, #666666);
  --input-field-value-color: var(--ui-text-base-primary, #2d2d2d);
  --input-field-placeholder-color: var(--ui-text-base-secondary, #666666);
  --input-field-error-color: var(--ui-text-decision-error, #d01345);

  /* Disabled — not in Figma node 594:8160; reuses the shared action-disabled tokens. */
  --input-field-surface-disabled: var(--ui-surface-action-disabled, #eeeeee);
  --input-field-border-disabled: var(--ui-border-action-disabled, #dddddd);
}

.input-field-module_root__YP8lj {
  display: flex;
  flex-direction: column;
  gap: var(--input-field-gap);
  align-items: stretch;
}

.input-field-module_label__T1B5s {
  display: flex;
  flex-direction: column;
  gap: var(--input-field-gap);
  align-items: stretch;
}

.input-field-module_labelText__dhDNt {
  font-family: var(--input-field-label-font-family);
  font-size: var(--input-field-label-font-size);
  font-weight: var(--input-field-label-font-weight);
  line-height: var(--input-field-label-line-height);
  letter-spacing: var(--input-field-label-letter-spacing);
  color: var(--input-field-label-color);
  text-transform: uppercase;
  word-break: break-word;
}

[dir="ltr"] .input-field-module_field__22N9o {
  padding-left: var(--input-field-padding-inline-start);
}

[dir="rtl"] .input-field-module_field__22N9o {
  padding-right: var(--input-field-padding-inline-start);
}

[dir="ltr"] .input-field-module_field__22N9o {
  padding-right: var(--input-field-padding-inline-end);
}

[dir="rtl"] .input-field-module_field__22N9o {
  padding-left: var(--input-field-padding-inline-end);
}

.input-field-module_field__22N9o {
  display: flex;
  align-items: center;
  padding-top: var(--input-field-padding-block);
  padding-bottom: var(--input-field-padding-block);
  border: var(--input-field-border-width) solid var(--input-field-border);
}

.input-field-module_field__22N9o:focus-within {
  border-color: var(--input-field-border-focus);
}

.input-field-module_fieldError__AUJoc,
.input-field-module_fieldError__AUJoc:focus-within {
  border-color: var(--input-field-border-error);
}

.input-field-module_field__22N9o[\:has\(.input-field-module_input__uzUqT\:disabled\)] {
  background-color: var(--input-field-surface-disabled);
  border-color: var(--input-field-border-disabled);
  cursor: not-allowed;
}

.input-field-module_field__22N9o:has(.input-field-module_input__uzUqT:disabled) {
  background-color: var(--input-field-surface-disabled);
  border-color: var(--input-field-border-disabled);
  cursor: not-allowed;
}

.input-field-module_input__uzUqT {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--input-field-value-font-family);
  font-size: var(--input-field-value-font-size);
  font-weight: var(--input-field-value-font-weight);
  line-height: var(--input-field-value-line-height);
  letter-spacing: var(--input-field-value-letter-spacing);
  color: var(--input-field-value-color);
  text-overflow: ellipsis;
}

.input-field-module_input__uzUqT:focus {
  outline: none;
}

.input-field-module_input__uzUqT:disabled {
  cursor: not-allowed;
}

.input-field-module_input__uzUqT::placeholder {
  font-family: var(--input-field-placeholder-font-family);
  font-size: var(--input-field-placeholder-font-size);
  font-weight: var(--input-field-placeholder-font-weight);
  line-height: var(--input-field-placeholder-line-height);
  letter-spacing: var(--input-field-placeholder-letter-spacing);
  color: var(--input-field-placeholder-color);
  opacity: 1; /* Firefox dims ::placeholder by default, which would override the token colour. */
}

.input-field-module_errorText__8gc3- {
  margin: 0;
  font-family: var(--input-field-error-font-family);
  font-size: var(--input-field-error-font-size);
  font-weight: var(--input-field-error-font-weight);
  line-height: var(--input-field-error-line-height);
  letter-spacing: var(--input-field-error-letter-spacing);
  color: var(--input-field-error-color);
  word-break: break-word;
}

.text-field_description {
  color: var(--pc-color-text-secondary);
  padding-top: var(--pc-spacing-200);
}

.cancellation-form_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  position: relative;
  padding: var(--pc-spacing-600) 0;
  max-width: 747px;
}

  .cancellation-form_container .cancellation-form_form {
    max-width: 440px;
    margin: auto;
    padding: 0 var(--pc-spacing-300);
    width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 736px) {

  .cancellation-form_container .cancellation-form_form {
      padding: 0 var(--pc-spacing-600);
      width: calc(100% - 48px)
  }
    }

  @media (max-width: 736px) {

  .cancellation-form_container .cancellation-form_form {
      padding: 0 var(--pc-spacing-600);
      width: calc(100% - 48px)
  }
    }

  .cancellation-form_container .cancellation-form_form p {
      padding: 0 0 var(--pc-spacing-800) 0;

    }

  .cancellation-form_container .cancellation-form_form button {
      width: 100%;
      max-width: 288px;
    }

  .cancellation-form_container .cancellation-form_form .cancellation-form_requiredLabel {
      width: 100%;
      color: var(--pc-color-text-secondary);
      padding-top: var(--pc-spacing-300);
    }

  .cancellation-form_container .cancellation-form_formControl:first-of-type {
    margin-top: var(--pc-spacing-400);
  }

  .cancellation-form_container .cancellation-form_formControl {
    padding-bottom: var(--pc-spacing-600);
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .cancellation-form_container label,
  .cancellation-form_container legend {
    text-transform: uppercase;
    color: var(--pc-color-text-secondary);
    padding-bottom: var(--pc-spacing-200);
  }

  @keyframes cancellation-form_fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

  .cancellation-form_container .cancellation-form_errorResponse {

    animation: cancellation-form_fadeIn 0.6s ease;
    background-color: var(--pc-color-surface-error);
    width: 100%;
    text-align: center;
    padding: var(--pc-spacing-300) 0px;
    margin-bottom: var(--pc-spacing-400);
}

  .cancellation-form_container .cancellation-form_errorResponse h3,
    .cancellation-form_container .cancellation-form_errorResponse p {
      padding: var(--pc-spacing-300) 0;
    }

  .cancellation-form_container .cancellation-form_errorResponse h3 {
      font-weight: bold;
    }

  @media (max-width: 736px) {

  .cancellation-form_container .cancellation-form_errorResponse {
      width: 100vw
  }
    }
.error-message_errorMessage {
  background: var(--pc-color-surface-error);
  z-index: 10;
  bottom: -4px;
  padding: 0.625rem 1rem;
  border: 1px solid var(--pc-color-border-error);
  position: relative;
  display: block;
}

.error-message_errorMessage:before {
  border-color: transparent;
  border-bottom-color: var(--pc-color-border-error);
  border-width: 10px;
  border-style: solid;
  left: 14px;
  content: "";
  bottom: 100%;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  top: -20px;
}

.error-message_errorMessage:after {
  border-color: transparent;
  border-bottom-color: var(--pc-color-surface-error);
  border-width: 9px;
  border-style: solid;
  left: 15px;
  content: "";
  bottom: 100%;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  top: -18px;
}
.text-area_input {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  padding:7px 8px;
  border-radius:0;
  width: 100%;
  color: var(--pc-color-text-primary);
  border: solid var(--pc-border-width-hairline) var(--pc-color-border-default);
  font-size: var(--pc-font-size-sm);
  line-height: 1.5;
  letter-spacing: var(--pc-letter-spacing-xs);
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: var(--pc-spacing-350);
  box-sizing: border-box;
  font-family: "futura-pt-n4","futura-pt",Tahoma,Geneva,Verdana,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
}

.text-area_input:disabled {
  opacity: 0.5;
}

.text-area_inputError {
  border-color: var(--pc-color-border-error);
}

.text-area_description {
  color: var(--pc-color-text-secondary);
  padding-top: var(--pc-spacing-200);
}

.text-area_wrapper {
  position: relative;
}

.text-area_characterCount {
  color: var(--pc-color-text-secondary);
  display: flex;
  justify-content: right;
  right: 0;
  bottom: -18px;
}

.premier-cancellation-layout_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  position: relative;
  max-width: 650px;
  padding: var(--pc-spacing-600) 0;
  width: 100vw;
}
  @media (max-width: 736px) {.premier-cancellation-layout_container {
    padding: 0 0 var(--pc-spacing-600) 0
}
  }
  .premier-cancellation-layout_container h1 {
    padding: var(--pc-spacing-800) 0;
    text-align: center;
  }
  .premier-cancellation-layout_container p {
    padding: 0 var(--pc-spacing-300);
  }
  .premier-cancellation-layout_container p:nth-of-type(1), .premier-cancellation-layout_container p:nth-of-type(2) {
    padding-bottom: var(--pc-spacing-700);
  }
  .premier-cancellation-layout_container .premier-cancellation-layout_card {
    background-color: var(--pc-color-surface-raised);
    margin-bottom: var(--pc-spacing-250);
  }
  .premier-cancellation-layout_container .premier-cancellation-layout_card:nth-of-type(2) {
    padding: var(--pc-spacing-600);
  }
  .premier-cancellation-layout_container .premier-cancellation-layout_faqlink {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
  }
  @keyframes premier-cancellation-layout_fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  .premier-cancellation-layout_container .premier-cancellation-layout_errorResponse {
    animation: premier-cancellation-layout_fadeIn 0.6s ease;
    width: 100%;
    max-width: 440px;
    margin: 0 auto var(--pc-spacing-400);
}


.success-view_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
  @keyframes success-view_fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .success-view_container {
  animation: success-view_fadeIn 0.6s ease;
}
  .success-view_container a {
    margin-bottom: var(--pc-spacing-600);
  }
  @media (max-width: 736px) {
    .success-view_container a {
      width: calc(100% - 48px);
    }
  }
/*
  alert.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 763:2227).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* Spacing */
  --alert-padding: 16px;
  --alert-gap: 16px;
  --alert-content-gap: 4px;

  /* Background tokens — one per type */
  --alert-bg-information: #cde2f5;
  --alert-bg-success: #cceede;
  --alert-bg-warning: #ffebcc;
  --alert-bg-error: #fae7ec;
  --alert-bg-system: #2d2d2d;

  /* Text tokens */
  --alert-text-default: #2d2d2d;
  --alert-text-system: #ffffff;

  /* Link tokens */
  --alert-link-default: var(--ui-link-on-colour, #2d2d2d);

  /* @chameleon-typography: alert-title | Label/Field Group */
  --alert-title-font-family: "futura-pt", sans-serif;
  --alert-title-font-size: var(--ui-font-size-label-field-group, 14px);
  --alert-title-font-weight: var(--ui-font-weight-label-field-group, 600);
  --alert-title-line-height: var(--ui-line-height-label-field-group, 20px);
  --alert-title-letter-spacing: var(
    --ui-letter-spacing-label-field-group,
    0.8px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: alert-message | Body/Paragraph Large */
  --alert-message-font-family: "futura-pt", sans-serif;
  --alert-message-font-size: var(--ui-font-size-body-paragraph-large, 16px);
  --alert-message-font-weight: var(--ui-font-weight-body-paragraph-large, 400);
  --alert-message-line-height: var(--ui-line-height-body-paragraph-large, 22px);
  --alert-message-letter-spacing: var(
    --ui-letter-spacing-body-paragraph-large,
    0.6px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: alert-action | Link/Link Large */
  --alert-action-font-family: "futura-pt", sans-serif;
  --alert-action-font-size: var(--ui-font-size-link-link-large, 16px);
  --alert-action-font-weight: var(--ui-font-weight-link-link-large, 400);
  --alert-action-line-height: var(--ui-line-height-link-link-large, 22px);
  --alert-action-letter-spacing: var(
    --ui-letter-spacing-link-link-large,
    0.4px
  );
  /* @end-chameleon-typography */
}

.alert-module_root__UcUdo {
  display: flex;
  align-items: flex-start;
  padding: var(--alert-padding);
  background-color: var(--alert-bg);
  color: var(--alert-text);
  width: 100%;
  box-sizing: border-box;
}

.alert-module_attributes__dkgBP {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  gap: var(--alert-gap);
  min-width: 0;
}

.alert-module_iconSlot__oaX1l {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.alert-module_content__XSZwq {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--alert-content-gap);
  min-width: 0;
}

.alert-module_title__CgOn- {
  font-family: var(--alert-title-font-family);
  font-size: var(--alert-title-font-size);
  font-weight: var(--alert-title-font-weight);
  line-height: var(--alert-title-line-height);
  letter-spacing: var(--alert-title-letter-spacing);
  text-transform: uppercase;
  margin: 0;
  color: var(--alert-text);
}

.alert-module_message__7uUJt {
  font-family: var(--alert-message-font-family);
  font-size: var(--alert-message-font-size);
  font-weight: var(--alert-message-font-weight);
  line-height: var(--alert-message-line-height);
  letter-spacing: var(--alert-message-letter-spacing);
  margin: 0;
  color: var(--alert-text);
}

.alert-module_action__mOdBh {
  font-family: var(--alert-action-font-family);
  font-size: var(--alert-action-font-size);
  font-weight: var(--alert-action-font-weight);
  line-height: var(--alert-action-line-height);
  letter-spacing: var(--alert-action-letter-spacing);
  text-decoration: underline;
  color: var(--alert-link);
}

/* Ensure anchor elements inside action inherit the alert's link colour
   rather than browser-default blue */
.alert-module_action__mOdBh a {
  color: inherit;
  text-decoration: inherit;
}

.alert-module_closeButton__mhHZx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--alert-text);
}

/* Type variants — set --alert-bg, --alert-text, --alert-link */

.alert-module_information__ADZy7 {
  --alert-bg: var(--alert-bg-information);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_success__9XtBq {
  --alert-bg: var(--alert-bg-success);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_warning__EagYG {
  --alert-bg: var(--alert-bg-warning);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_error__nSpLr {
  --alert-bg: var(--alert-bg-error);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_system__J-EYE {
  --alert-bg: var(--alert-bg-system);
  --alert-text: var(--alert-text-system);
  --alert-link: var(--alert-text-system);
}

.app_container {
  display: flex;
  justify-content: center;
  background-color: var(--pc-color-surface-canvas);
}
  .app_container .app_barnsley2 {
    font-size: 48px;
    letter-spacing: var(--pc-letter-spacing-xl);
    font-weight: bold;
    line-height: 56px;
    text-transform: none;
    font-style: normal;
  }
  @media (max-width: 736px) {
  .app_container .app_barnsley2 {
      font-size: 34px;
      line-height: var(--pc-line-height-3xl)
  }
    }
  .app_container .app_leavesden2 {
    font-size: var(--pc-font-size-sm);
    letter-spacing: var(--pc-letter-spacing-xs);
    line-height: var(--pc-line-height-md);
  }
  @media (max-width: 736px) {
  .app_container .app_leavesden2 {
      font-size: var(--pc-font-size-xs);
      line-height: var(--pc-line-height-sm)
  }
    }
  .app_container .app_leavesden3 {
    font-size: var(--pc-font-size-xs);
    letter-spacing: var(--pc-letter-spacing-sm);
    line-height: var(--pc-line-height-sm);
    font-weight: normal;
    text-transform: none;
    font-style: normal;
  }
  @media (max-width: 736px) {
  .app_container .app_leavesden3 {
      font-size: var(--pc-font-size-2xs);
      line-height: var(--pc-line-height-2xs)
  }
    }
  .app_container .app_london3 {
    font-weight: 600;
    font-size: var(--pc-font-size-xs);
    line-height: var(--pc-line-height-sm);
    letter-spacing: var(--pc-letter-spacing-md);
  }
  @media (max-width: 736px) {
  .app_container .app_london3 {
      font-size: var(--pc-font-size-2xs);
      line-height: var(--pc-line-height-2xs)
  }
    }
  .app_container .app_button {
    font-family: "futura-pt-n4","futura-pt",Tahoma,Geneva,Verdana,Arial,sans-serif;
    font-size: var(--pc-font-size-sm);
    line-height: var(--pc-line-height-xs);
    letter-spacing: var(--pc-letter-spacing-sm);
  }


/*# sourceMappingURL=premier-cancellation.2f59e34a52247b1b43d6.css.map*/