:root {
  /* Neutral */
  --colour-neutral-0: #FFFFFF;
  --colour-neutral-100: #FCFCFC;
  --colour-neutral-200: #F7F7F7;
  --colour-neutral-300: #ECECEC;
  --colour-neutral-400: #DDDDDD;
  --colour-neutral-500: #BFBFBF;
  --colour-neutral-600: #858585;
  --colour-neutral-700: #5C5858;
  --colour-neutral-800: #423D3D;
  --colour-neutral-900: #302C2C;
  --colour-neutral-1000: #1E1A1A;

  /* Red */
  --colour-red-100: #FFF0F0;
  --colour-red-200: #FCD9D9;
  --colour-red-300: #FCC0C0;
  --colour-red-400: #F79797;
  --colour-red-600: #B01C1C;
  --colour-red-800: #8E0B0B;
  --colour-red-1000: #660000;
  --colour-red-brand: #D82B31;

  /* Orange */
  --colour-orange-100: #FFECE2;
  --colour-orange-200: #FFD4BF;
  --colour-orange-300: #FFB088;
  --colour-orange-400: #FF8157;
  --colour-orange-500: #F45925;
  --colour-orange-600: #D44211;
  --colour-orange-800: #A13612;
  --colour-orange-1000: #792706;

  /* Yellow */
  --colour-yellow-100: #FFF5E7;
  --colour-yellow-200: #FFEFCC;
  --colour-yellow-300: #FFDB9F;
  --colour-yellow-400: #FFC370;
  --colour-yellow-500: #F5A93D;
  --colour-yellow-600: #DA840B;
  --colour-yellow-800: #AA6709;
  --colour-yellow-1000: #834F07;

  /* Green */
  --colour-green-100: #F1FBEF;
  --colour-green-200: #E1F4D7;
  --colour-green-300: #C4EBBC;
  --colour-green-400: #90D596;
  --colour-green-500: #59C06A;
  --colour-green-600: #2F8644;
  --colour-green-800: #236B35;
  --colour-green-1000: #1F4F2A;

  /* Blue */
  --colour-blue-100: #F0F6FF;
  --colour-blue-200: #DEE9FF;
  --colour-blue-300: #A7C3F9;
  --colour-blue-400: #88AEEF;
  --colour-blue-500: #5A82E0;
  --colour-blue-600: #3B6CD8;
  --colour-blue-800: #1D48C2;
  --colour-blue-1000: #15358E;

  /* Purple */
  --colour-purple-100: #F0EBFF;
  --colour-purple-200: #E2D5FB;
  --colour-purple-300: #CCB2F4;
  --colour-purple-400: #AA85E6;
  --colour-purple-500: #976CE0;
  --colour-purple-600: #763ACC;
  --colour-purple-800: #5A28B2;
  --colour-purple-1000: #431E85;

  /* Magenta */
  --colour-magenta-100: #FFEBFA;
  --colour-magenta-200: #FBD5F1;
  --colour-magenta-300: #F4B2E3;
  --colour-magenta-400: #E685CE;
  --colour-magenta-500: #DA60BB;
  --colour-magenta-600: #C639A3;
  --colour-magenta-800: #A72586;
  --colour-magenta-1000: #7D1C65;

  /* Takeaway */
  --colour-takeaway-primary: #F95F09;
  --colour-takeaway-secondary: rgba(255, 173, 128, 0.35);
}

/* Spacing, radius, and border widths are shared by both themes. */
:root {
  --spacing-0: 0px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-40px: 40px;
  --spacing-48px: 48px;
  --spacing-56px: 56px;
  --spacing-64px: 64px;
  --spacing-72px: 72px;
  --spacing-80px: 80px;
  --spacing-88px: 88px;
  --spacing-96px: 96px;
  --spacing-104px: 104px;
  --spacing-112px: 112px;
  --spacing-120px: 120px;
  --spacing-128px: 128px;

  /* Corner radius */
  --radius-none: 0px;
  --radius-tight: 2px;
  --radius-control: 4px;
  --radius-container: 8px;
  --radius-sheet: 16px;
  --radius-xl: 32px;
  --radius-2xl: 128px;
  --radius-pill: 360px;

  /* Border width */
  --border-width-default: 1px;
  --border-width-focus: 2px;
  --border-width-pressed: 2px;
  --border-width-error: 2px;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface-canvas: var(--colour-neutral-100);
  --surface-default: var(--colour-neutral-0);
  --surface-muted: var(--colour-neutral-200);
  --surface-contrast: var(--colour-neutral-800);

  /* Text */
  --text-primary: var(--colour-neutral-1000);
  --text-secondary: var(--colour-neutral-800);
  --text-muted: var(--colour-neutral-700);
  --text-placeholder: var(--colour-neutral-600);
  --text-disabled: var(--colour-neutral-600);
  --text-contrast: var(--colour-neutral-0);
  --text-brand: var(--colour-red-brand);

  /* Borders */
  --border-subtle: var(--colour-neutral-300);
  --border-default: var(--colour-neutral-400);
  --border-focus: var(--colour-neutral-500);
  --border-pressed: var(--colour-neutral-500);
  --border-disabled: var(--colour-neutral-300);
  --border-contrast: var(--colour-neutral-700);

  /* Icons */
  --icon-default: var(--colour-neutral-800);
  --icon-muted: var(--colour-neutral-700);
  --icon-disabled: var(--colour-neutral-600);
  --icon-contrast: var(--colour-neutral-0);
  --icon-brand: var(--colour-red-brand);

  /* Status: danger */
  --status-danger-surface: var(--colour-red-100);
  --status-danger-border: var(--colour-red-300);
  --status-danger-text: var(--colour-red-800);
  --status-danger-icon-background: var(--colour-red-600);
  --status-danger-icon-foreground: var(--colour-neutral-0);
  --status-danger-solid-surface: var(--colour-red-600);
  --status-danger-solid-icon-background: var(--colour-neutral-0);
  --status-danger-solid-icon-foreground: var(--colour-red-600);

  /* Status: info */
  --status-info-surface: var(--colour-blue-200);
  --status-info-border: var(--colour-blue-300);
  --status-info-text: var(--colour-blue-800);
  --status-info-icon-background: var(--colour-blue-600);
  --status-info-icon-foreground: var(--colour-neutral-0);
  --status-info-solid-surface: var(--colour-blue-600);
  --status-info-solid-icon-background: var(--colour-neutral-0);
  --status-info-solid-icon-foreground: var(--colour-blue-600);

  /* Status: warning */
  --status-warning-surface: var(--colour-yellow-100);
  --status-warning-border: var(--colour-yellow-300);
  --status-warning-text: var(--colour-yellow-800);
  --status-warning-icon-background: var(--colour-yellow-500);
  --status-warning-icon-foreground: var(--colour-neutral-1000);
  --status-warning-solid-surface: var(--colour-yellow-400);
  --status-warning-solid-icon-background: var(--colour-neutral-1000);
  --status-warning-solid-icon-foreground: var(--colour-neutral-0);

  /* Status: success */
  --status-success-surface: var(--colour-green-200);
  --status-success-border: var(--colour-green-300);
  --status-success-text: var(--colour-green-800);
  --status-success-icon-background: var(--colour-green-600);
  --status-success-icon-foreground: var(--colour-neutral-0);
  --status-success-solid-surface: var(--colour-green-600);
  --status-success-solid-icon-background: var(--colour-neutral-0);
  --status-success-solid-icon-foreground: var(--colour-green-600);

  /* Overlay */
  --overlay-scrim: rgba(30, 26, 26, 0.4);

  /* Button: primary */
  --button-primary-background: var(--colour-neutral-1000);
  --button-primary-background-hover: var(--colour-neutral-800);
  --button-primary-background-pressed: var(--colour-neutral-900);
  --button-primary-border: var(--colour-neutral-1000);
  --button-primary-border-hover: var(--colour-neutral-800);
  --button-primary-border-pressed: var(--colour-neutral-900);
  --button-primary-foreground: var(--colour-neutral-0);
  --button-primary-foreground-hover: var(--colour-neutral-0);
  --button-primary-foreground-pressed: var(--colour-neutral-0);

  /* Button: secondary */
  --button-secondary-background: var(--colour-neutral-300);
  --button-secondary-background-hover: var(--colour-neutral-300);
  --button-secondary-background-pressed: var(--colour-neutral-400);
  --button-secondary-border: var(--border-default);
  --button-secondary-border-hover: var(--border-focus);
  --button-secondary-border-pressed: var(--border-pressed);
  --button-secondary-foreground: var(--text-secondary);
  --button-secondary-foreground-hover: var(--text-secondary);
  --button-secondary-foreground-pressed: var(--text-secondary);

  /* Button: tertiary */
  --button-tertiary-background: var(--surface-default);
  --button-tertiary-background-hover: var(--colour-neutral-100);
  --button-tertiary-background-pressed: var(--colour-neutral-200);
  --button-tertiary-border: var(--border-default);
  --button-tertiary-border-hover: var(--border-focus);
  --button-tertiary-border-pressed: var(--border-pressed);
  --button-tertiary-foreground: var(--text-secondary);
  --button-tertiary-foreground-hover: var(--text-secondary);
  --button-tertiary-foreground-pressed: var(--text-secondary);

  /* Button: warning */
  --button-warning-background: var(--colour-yellow-400);
  --button-warning-background-hover: var(--colour-yellow-300);
  --button-warning-background-pressed: var(--colour-yellow-500);
  --button-warning-border: var(--colour-yellow-400);
  --button-warning-border-hover: var(--colour-yellow-300);
  --button-warning-border-pressed: var(--colour-yellow-500);
  --button-warning-foreground: var(--colour-neutral-900);
  --button-warning-foreground-hover: var(--colour-neutral-900);
  --button-warning-foreground-pressed: var(--colour-neutral-900);

  /* Button: success */
  --button-success-background: var(--colour-green-400);
  --button-success-background-hover: var(--colour-green-300);
  --button-success-background-pressed: var(--colour-green-500);
  --button-success-border: var(--colour-green-400);
  --button-success-border-hover: var(--colour-green-300);
  --button-success-border-pressed: var(--colour-green-500);
  --button-success-foreground: var(--colour-neutral-800);
  --button-success-foreground-hover: var(--colour-neutral-800);
  --button-success-foreground-pressed: var(--colour-neutral-800);

  /* Button: disabled */
  --button-disabled-background: var(--surface-muted);
  --button-disabled-border: var(--border-disabled);
  --button-disabled-foreground: var(--text-disabled);

  /* Extras */
  --text-inverted: var(--colour-neutral-0);
  --text-danger: var(--colour-red-800);
  --text-success: var(--colour-green-800);
  --text-warning: var(--colour-yellow-800);
  --text-info: var(--colour-blue-800);
  --surface-subtle: var(--colour-neutral-100);
  --surface-inverted: var(--colour-neutral-1000);
  --surface-disabled: var(--colour-neutral-300);
  --surface-brand: var(--colour-takeaway-primary, var(--text-primary));
  --surface-danger-subtle: var(--colour-red-100);
  --surface-danger-soft: var(--colour-red-300);
  --surface-danger-strong: var(--colour-red-600);
  --surface-success-subtle: var(--colour-green-200);
  --surface-success-soft: var(--colour-green-300);
  --surface-success-strong: var(--colour-green-600);
  --surface-warning-subtle: var(--colour-yellow-100);
  --surface-warning-soft: var(--colour-yellow-300);
  --surface-warning-strong: var(--colour-yellow-600);
  --surface-info-subtle: var(--colour-blue-200);
  --border-muted: var(--colour-neutral-300);
  --border-strong: var(--colour-neutral-600);
  --border-danger: var(--colour-red-300);
  --border-success: var(--colour-green-300);
  --border-warning: var(--colour-yellow-300);
  --brand-primary: var(--colour-takeaway-primary, var(--text-primary));
  --brand-secondary: color-mix(in srgb, var(--brand-primary) 4%, transparent);
  --takeaway-primary: var(--colour-takeaway-primary, var(--text-primary));
  --takeaway-secondary: var(--brand-secondary);
  --icon-primary: var(--colour-neutral-800);
  --icon-secondary: var(--colour-neutral-700);
  --icon-primary-light: var(--colour-neutral-300);
  --icon-primary-dark: var(--colour-neutral-800);
}

/* Dark theme overrides. */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --surface-canvas: var(--colour-neutral-1000);
  --surface-default: var(--colour-neutral-900);
  --surface-primary: #0C0B09;
  --surface-muted: var(--colour-neutral-800);
  --surface-contrast: var(--colour-neutral-200);

  /* Text */
  --text-primary: var(--colour-neutral-0);
  --text-secondary: var(--colour-neutral-300);
  --text-muted: var(--colour-neutral-400);
  --text-placeholder: var(--colour-neutral-500);
  --text-disabled: var(--colour-neutral-600);
  --text-contrast: var(--colour-neutral-1000);
  --text-brand: var(--colour-red-400);

  /* Borders */
  --border-subtle: var(--colour-neutral-800);
  --border-default: var(--colour-neutral-700);
  --border-focus: var(--colour-neutral-600);
  --border-pressed: var(--colour-neutral-600);
  --border-disabled: var(--colour-neutral-800);
  --border-contrast: var(--colour-neutral-300);

  /* Icons */
  --icon-default: var(--colour-neutral-300);
  --icon-muted: var(--colour-neutral-400);
  --icon-disabled: var(--colour-neutral-600);
  --icon-contrast: var(--colour-neutral-1000);
  --icon-brand: var(--colour-red-400);

  /* Status: danger */
  --status-danger-surface: var(--colour-red-1000);
  --status-danger-border: var(--colour-red-400);
  --status-danger-text: var(--colour-red-400);
  --status-danger-icon-background: var(--colour-neutral-0);
  --status-danger-icon-foreground: var(--colour-red-1000);
  --status-danger-solid-surface: var(--colour-red-600);
  --status-danger-solid-icon-background: var(--colour-neutral-0);
  --status-danger-solid-icon-foreground: var(--colour-red-600);

  /* Status: info */
  --status-info-surface: var(--colour-blue-1000);
  --status-info-border: var(--colour-blue-600);
  --status-info-text: var(--colour-blue-300);
  --status-info-icon-background: var(--colour-neutral-0);
  --status-info-icon-foreground: var(--colour-blue-1000);
  --status-info-solid-surface: var(--colour-blue-600);
  --status-info-solid-icon-background: var(--colour-neutral-0);
  --status-info-solid-icon-foreground: var(--colour-blue-600);

  /* Status: warning */
  --status-warning-surface: var(--colour-yellow-1000);
  --status-warning-border: var(--colour-yellow-600);
  --status-warning-text: var(--colour-yellow-300);
  --status-warning-icon-background: var(--colour-neutral-0);
  --status-warning-icon-foreground: var(--colour-yellow-1000);
  --status-warning-solid-surface: var(--colour-yellow-400);
  --status-warning-solid-icon-background: var(--colour-neutral-1000);
  --status-warning-solid-icon-foreground: var(--colour-neutral-0);

  /* Status: success */
  --status-success-surface: var(--colour-green-1000);
  --status-success-border: var(--colour-green-600);
  --status-success-text: var(--colour-green-300);
  --status-success-icon-background: var(--colour-neutral-0);
  --status-success-icon-foreground: var(--colour-green-1000);
  --status-success-solid-surface: var(--colour-green-600);
  --status-success-solid-icon-background: var(--colour-neutral-0);
  --status-success-solid-icon-foreground: var(--colour-green-600);

  /* Overlay */
  --overlay-scrim: rgba(30, 26, 26, 0.7);

  /* Button: primary */
  --button-primary-background: var(--colour-neutral-0);
  --button-primary-background-hover: var(--colour-neutral-200);
  --button-primary-background-pressed: var(--colour-neutral-300);
  --button-primary-border: var(--colour-neutral-0);
  --button-primary-border-hover: var(--colour-neutral-200);
  --button-primary-border-pressed: var(--colour-neutral-300);
  --button-primary-foreground: var(--colour-neutral-800);
  --button-primary-foreground-hover: var(--colour-neutral-800);
  --button-primary-foreground-pressed: var(--colour-neutral-800);

  /* Button: secondary */
  --button-secondary-background: var(--colour-neutral-700);
  --button-secondary-background-hover: var(--colour-neutral-700);
  --button-secondary-background-pressed: var(--colour-neutral-700);
  --button-secondary-border: var(--border-default);
  --button-secondary-border-hover: var(--border-focus);
  --button-secondary-border-pressed: var(--border-pressed);
  --button-secondary-foreground: var(--text-secondary);
  --button-secondary-foreground-hover: var(--text-secondary);
  --button-secondary-foreground-pressed: var(--text-secondary);

  /* Button: tertiary */
  --button-tertiary-background: var(--surface-default);
  --button-tertiary-background-hover: var(--colour-neutral-900);
  --button-tertiary-background-pressed: var(--colour-neutral-800);
  --button-tertiary-border: var(--border-default);
  --button-tertiary-border-hover: var(--border-focus);
  --button-tertiary-border-pressed: var(--border-pressed);
  --button-tertiary-foreground: var(--text-secondary);
  --button-tertiary-foreground-hover: var(--text-secondary);
  --button-tertiary-foreground-pressed: var(--text-secondary);

  /* Button: warning */
  --button-warning-background: var(--colour-yellow-500);
  --button-warning-background-hover: var(--colour-yellow-400);
  --button-warning-background-pressed: var(--colour-yellow-600);
  --button-warning-border: var(--colour-yellow-500);
  --button-warning-border-hover: var(--colour-yellow-400);
  --button-warning-border-pressed: var(--colour-yellow-600);
  --button-warning-foreground: var(--colour-neutral-900);
  --button-warning-foreground-hover: var(--colour-neutral-900);
  --button-warning-foreground-pressed: var(--colour-neutral-900);

  /* Button: success */
  --button-success-background: var(--colour-green-300);
  --button-success-background-hover: var(--colour-green-200);
  --button-success-background-pressed: var(--colour-green-400);
  --button-success-border: var(--colour-green-300);
  --button-success-border-hover: var(--colour-green-200);
  --button-success-border-pressed: var(--colour-green-400);
  --button-success-foreground: var(--colour-neutral-800);
  --button-success-foreground-hover: var(--colour-neutral-800);
  --button-success-foreground-pressed: var(--colour-neutral-800);

  /* Button: disabled */
  --button-disabled-background: var(--surface-muted);
  --button-disabled-border: var(--border-disabled);
  --button-disabled-foreground: var(--text-disabled);

  /* Additional existing component tokens */
  --border-muted: var(--colour-neutral-800);
  --icon-primary: var(--colour-neutral-300);
  --icon-secondary: var(--colour-neutral-400);
  --surface-subtle: var(--colour-neutral-900);
  --surface-inverted: var(--colour-neutral-0);
  --brand-secondary: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --text-danger: var(--colour-red-400);
  --border-danger: var(--colour-red-400);
  --surface-danger-subtle: var(--colour-red-1000);
  --text-info: var(--colour-blue-300);
  --surface-info-subtle: var(--colour-blue-1000);
  --text-warning: var(--colour-yellow-300);
  --border-warning: var(--colour-yellow-600);
  --surface-warning-subtle: var(--colour-yellow-1000);
  --text-success: var(--colour-green-300);
  --border-success: var(--colour-green-600);
  --surface-success-subtle: var(--colour-green-1000);
}

/* Shared page colours: JavaScript supplies the secondary colour at 12% opacity. */
html[data-theme="dark"] body {
  --takeaway-secondary: var(--theme-secondary, var(--colour-takeaway-secondary));
}

/* A failed primary contrast check selects both neutral defaults. */
html[data-theme="dark"][data-theme-default-colours="true"] body {
  --takeaway-primary: var(--text-primary);
  --takeaway-secondary: var(--surface-muted);
}