/*
  Generated by hand from design/tokens.json. If the tokens file changes,
  update this file to match — it is not built automatically.
*/

:root {
  /* Palette */
  --white: #ffffff;
  --grey-50: #f2f2f2;
  --grey-100: #e5e5e5;
  --grey-300: #b2b2b2;
  --grey-700: #4d4d4d;
  --grey-900: #1e1e1e;
  --lime-500: #b0fc43;
  --lime-400: #b7fc69;
  --lime-300: #c5fc7e;
  --lime-200: #d4ffa1;
  --teal-900: #0a2d34;
  --teal-700: #0a4e4b;
  --teal-500: #497c7e;
  --teal-300: #86a8a9;
  --lilac-500: #b1a0ff;
  --lilac-300: #c5c3ff;
  --lilac-200: #d8d5ff;
  --lilac-100: #e8e7ff;
  --indigo-500: #797cfb;
  --indigo-400: #8ea5fb;
  --indigo-300: #b1c0ff;
  --indigo-200: #c9d8ff;
  --coral-700: #b8321f;
  --coral-500: #ff6b57;
  --coral-300: #ffa99b;
  --coral-100: #ffe4df;

  /* Semantic colours */
  --primary: var(--grey-900);
  --on-primary: var(--white);
  --secondary: var(--indigo-500);
  --on-secondary: var(--grey-900);
  --secondary-container: var(--indigo-200);
  --on-secondary-container: var(--grey-900);
  --tertiary: var(--teal-900);
  --on-tertiary: var(--white);
  --tertiary-container: var(--teal-300);
  --on-tertiary-container: var(--teal-900);
  --accent: var(--lime-500);
  --on-accent: var(--grey-900);
  --accent-container: var(--lime-200);
  --on-accent-container: var(--grey-900);
  --highlight: var(--lilac-500);
  --highlight-container: var(--lilac-100);
  --surface: var(--white);
  --surface-container: var(--grey-50);
  --surface-container-high: var(--grey-100);
  --on-surface: var(--grey-900);
  --on-surface-variant: var(--grey-700);
  --outline: var(--grey-700);
  --outline-variant: var(--grey-300);
  --inverse-surface: var(--grey-900);
  --inverse-on-surface: var(--white);
  --inverse-on-surface-variant: var(--grey-300);
  --inverse-primary: var(--lime-500);
  --inverse-outline: var(--grey-700);
  --focus-ring: var(--indigo-500);
  --error: var(--coral-700);
  --on-error: var(--white);
  --error-container: var(--coral-100);
  --on-error-container: var(--grey-900);
  --inverse-error: var(--coral-500);
  --success: var(--teal-700);
  --on-success: var(--white);
  --success-container: var(--lime-200);
  --on-success-container: var(--teal-900);
  --scrim: rgba(30, 30, 30, 0.32);

  /* Type families */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Kaisei Decol', Georgia, 'Times New Roman', serif;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-overlay: 0 8px 24px rgba(30, 30, 30, 0.12);

  /* State opacities */
  --state-hover: 0.08;
  --state-focus: 0.1;
  --state-pressed: 0.1;
  --state-hover-strong: 0.12;
  --state-pressed-strong: 0.16;
  --state-dragged: 0.16;
  --disabled-content: 0.38;
  --disabled-container: 0.12;

  /* Control sizes */
  --size-control: 40px;
  --size-field: 48px;
  --size-touch: 48px;
  --size-icon: 20px;
  --size-focus: 2px;
}