/*
 * @reapit/elemental — DS-Aligned Token Set
 *
 * This file implements the Phase 1 theme token rewrite as part of the
 * DS Alignment Programme. Decisions recorded in plan/04-principal-decisions.md
 * are binding — do not re-litigate naming or mapping choices here.
 *
 * Structure:
 *   1. Font import (Inter variable)
 *   2. @theme inline — Tailwind v4 colour/radius/font/breakpoint mappings
 *   3. :root — primitive colour palette, semantic aliases, ShadCN aliases,
 *              legacy alert/badge aliases, radius, typography, icon-size vars
 *   4. .dark — inverted/derived dark-mode overrides
 *   5. @layer base — global resets
 *   6. @keyframes
 */

@import 'tailwindcss';
@import '@fontsource-variable/inter';

@custom-variant dark (&:is(.dark *));

/* ─────────────────────────────────────────────────────────────────────────────
   Tailwind v4 @theme inline block
   Every CSS variable that should generate a Tailwind utility class must have
   a corresponding --color-* / --radius-* / --breakpoint-* entry here.
   ──────────────────────────────────────────────────────────────────────────── */
@theme inline {
  /* ── ShadCN semantic colours ── */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* ── Chart ── */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* ── Sidebar ── */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* ── Badge (legacy Tailwind utilities) ── */
  --color-badge-neutral: var(--badge-neutral);
  --color-badge-neutral-foreground: var(--badge-neutral-foreground);
  --color-badge-success: var(--badge-success);
  --color-badge-success-foreground: var(--badge-success-foreground);
  --color-badge-pending: var(--badge-pending);
  --color-badge-pending-foreground: var(--badge-pending-foreground);
  --color-badge-warning: var(--badge-warning);
  --color-badge-warning-foreground: var(--badge-warning-foreground);
  --color-badge-danger: var(--badge-danger);
  --color-badge-danger-foreground: var(--badge-danger-foreground);
  --color-badge-inactive: var(--badge-inactive);
  --color-badge-inactive-foreground: var(--badge-inactive-foreground);
  --color-badge-accent-1: var(--badge-accent-1);
  --color-badge-accent-1-foreground: var(--badge-accent-1-foreground);
  --color-badge-accent-2: var(--badge-accent-2);
  --color-badge-accent-2-foreground: var(--badge-accent-2-foreground);

  /* ── DS primitive colour palette — text-purple-500, bg-neutral-025, etc. ── */
  --color-purple-050: var(--purple-050);
  --color-purple-100: var(--purple-100);
  --color-purple-200: var(--purple-200);
  --color-purple-300: var(--purple-300);
  --color-purple-400: var(--purple-400);
  --color-purple-500: var(--purple-500);
  --color-purple-600: var(--purple-600);
  --color-purple-700: var(--purple-700);
  --color-purple-800: var(--purple-800);
  --color-purple-900: var(--purple-900);

  --color-neutral-025: var(--neutral-025);
  --color-neutral-050: var(--neutral-050);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-150: var(--neutral-150);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-900: var(--neutral-900);

  --color-blue-050: var(--blue-050);
  --color-blue-100: var(--blue-100);
  --color-blue-200: var(--blue-200);
  --color-blue-300: var(--blue-300);
  --color-blue-400: var(--blue-400);
  --color-blue-500: var(--blue-500);
  --color-blue-600: var(--blue-600);
  --color-blue-700: var(--blue-700);
  --color-blue-800: var(--blue-800);
  --color-blue-900: var(--blue-900);

  --color-green-050: var(--green-050);
  --color-green-100: var(--green-100);
  --color-green-200: var(--green-200);
  --color-green-300: var(--green-300);
  --color-green-400: var(--green-400);
  --color-green-500: var(--green-500);
  --color-green-600: var(--green-600);
  --color-green-700: var(--green-700);
  --color-green-800: var(--green-800);
  --color-green-900: var(--green-900);

  --color-yellow-050: var(--yellow-050);
  --color-yellow-100: var(--yellow-100);
  --color-yellow-200: var(--yellow-200);
  --color-yellow-300: var(--yellow-300);
  --color-yellow-400: var(--yellow-400);
  --color-yellow-500: var(--yellow-500);
  --color-yellow-600: var(--yellow-600);
  --color-yellow-700: var(--yellow-700);
  --color-yellow-800: var(--yellow-800);
  --color-yellow-900: var(--yellow-900);

  --color-orange-050: var(--orange-050);
  --color-orange-100: var(--orange-100);
  --color-orange-200: var(--orange-200);
  --color-orange-300: var(--orange-300);
  --color-orange-400: var(--orange-400);
  --color-orange-500: var(--orange-500);
  --color-orange-600: var(--orange-600);
  --color-orange-700: var(--orange-700);
  --color-orange-800: var(--orange-800);
  --color-orange-900: var(--orange-900);

  --color-red-050: var(--red-050);
  --color-red-100: var(--red-100);
  --color-red-200: var(--red-200);
  --color-red-300: var(--red-300);
  --color-red-400: var(--red-400);
  --color-red-500: var(--red-500);
  --color-red-600: var(--red-600);
  --color-red-700: var(--red-700);
  --color-red-800: var(--red-800);
  --color-red-900: var(--red-900);

  --color-plum-050: var(--plum-050);
  --color-plum-100: var(--plum-100);
  --color-plum-200: var(--plum-200);
  --color-plum-300: var(--plum-300);
  --color-plum-400: var(--plum-400);
  --color-plum-500: var(--plum-500);
  --color-plum-600: var(--plum-600);
  --color-plum-700: var(--plum-700);
  --color-plum-800: var(--plum-800);
  --color-plum-900: var(--plum-900);

  --color-teal-050: var(--teal-050);
  --color-teal-100: var(--teal-100);
  --color-teal-200: var(--teal-200);
  --color-teal-300: var(--teal-300);
  --color-teal-400: var(--teal-400);
  --color-teal-500: var(--teal-500);
  --color-teal-600: var(--teal-600);
  --color-teal-700: var(--teal-700);
  --color-teal-800: var(--teal-800);
  --color-teal-900: var(--teal-900);

  --color-white-900: var(--white-900);

  /* ── DS semantic text aliases — text-text-primary, text-text-tertiary, etc. ── */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-placeholder: var(--text-placeholder);
  --color-text-white: var(--text-white);
  --color-text-action: var(--text-action);
  --color-text-pending: var(--text-pending);
  --color-text-warning: var(--text-warning);
  --color-text-error: var(--text-error);
  --color-text-success: var(--text-success);
  --color-text-info: var(--text-info);
  --color-text-accent-1: var(--text-accent-1);
  --color-text-accent-2: var(--text-accent-2);

  /* ── DS semantic icon aliases — text-icon-primary, etc. ── */
  --color-icon-primary: var(--icon-primary);
  --color-icon-secondary: var(--icon-secondary);
  --color-icon-disabled: var(--icon-disabled);
  --color-icon-white: var(--icon-white);
  --color-icon-action: var(--icon-action);
  --color-icon-pending: var(--icon-pending);
  --color-icon-warning: var(--icon-warning);
  --color-icon-error: var(--icon-error);
  --color-icon-success: var(--icon-success);
  --color-icon-info: var(--icon-info);
  --color-icon-star: var(--icon-star);
  --color-icon-accent-1: var(--icon-accent-1);
  --color-icon-accent-2: var(--icon-accent-2);

  /* ── DS semantic border aliases — border-border-action, etc. ── */
  --color-border-neutral-light: var(--border-neutral-light);
  --color-border-neutral-light-darker: var(--border-neutral-light-darker);
  --color-border-neutral-dark: var(--border-neutral-dark);
  --color-border-white: var(--border-white);
  --color-border-focus: var(--border-focus);
  --color-border-action-lightest: var(--border-action-lightest);
  --color-border-action-light: var(--border-action-light);
  --color-border-action: var(--border-action);
  --color-border-pending-lightest: var(--border-pending-lightest);
  --color-border-pending-light: var(--border-pending-light);
  --color-border-pending: var(--border-pending);
  --color-border-warning-lightest: var(--border-warning-lightest);
  --color-border-warning-light: var(--border-warning-light);
  --color-border-warning: var(--border-warning);
  --color-border-error-lightest: var(--border-error-lightest);
  --color-border-error-light: var(--border-error-light);
  --color-border-error: var(--border-error);
  --color-border-success-lightest: var(--border-success-lightest);
  --color-border-success-light: var(--border-success-light);
  --color-border-success: var(--border-success);
  --color-border-info-lightest: var(--border-info-lightest);
  --color-border-info-light: var(--border-info-light);
  --color-border-info: var(--border-info);
  --color-border-accent-1-lightest: var(--border-accent-1-lightest);
  --color-border-accent-1-light: var(--border-accent-1-light);
  --color-border-accent-1: var(--border-accent-1);
  --color-border-accent-2-lightest: var(--border-accent-2-lightest);
  --color-border-accent-2-light: var(--border-accent-2-light);
  --color-border-accent-2: var(--border-accent-2);

  /* ── DS semantic fill aliases — bg-fill-subtle, bg-fill-action-dark, etc. ── */
  --color-fill-subtle: var(--fill-subtle);
  --color-fill-neutral-lightest: var(--fill-neutral-lightest);
  --color-fill-neutral-light: var(--fill-neutral-light);
  --color-fill-neutral-medium: var(--fill-neutral-medium);
  --color-fill-neutral-dark: var(--fill-neutral-dark);
  --color-fill-neutral-darkest: var(--fill-neutral-darkest);
  --color-fill-white: var(--fill-white);
  --color-fill-action-lightest: var(--fill-action-lightest);
  --color-fill-action-light: var(--fill-action-light);
  --color-fill-action-dark: var(--fill-action-dark);
  --color-fill-pending-lightest: var(--fill-pending-lightest);
  --color-fill-pending-light: var(--fill-pending-light);
  --color-fill-pending-dark: var(--fill-pending-dark);
  --color-fill-warning-lightest: var(--fill-warning-lightest);
  --color-fill-warning-light: var(--fill-warning-light);
  --color-fill-warning-dark: var(--fill-warning-dark);
  --color-fill-error-lightest: var(--fill-error-lightest);
  --color-fill-error-light: var(--fill-error-light);
  --color-fill-error-dark: var(--fill-error-dark);
  --color-fill-success-lightest: var(--fill-success-lightest);
  --color-fill-success-light: var(--fill-success-light);
  --color-fill-success-dark: var(--fill-success-dark);
  --color-fill-info-lightest: var(--fill-info-lightest);
  --color-fill-info-light: var(--fill-info-light);
  --color-fill-info-dark: var(--fill-info-dark);
  --color-fill-accent-1-lightest: var(--fill-accent-1-lightest);
  --color-fill-accent-1-light: var(--fill-accent-1-light);
  --color-fill-accent-1-dark: var(--fill-accent-1-dark);
  --color-fill-accent-2-lightest: var(--fill-accent-2-lightest);
  --color-fill-accent-2-light: var(--fill-accent-2-light);
  --color-fill-accent-2-dark: var(--fill-accent-2-dark);

  /* ── Border radius ── */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* ── Typography ── */
  --font-sans:
    'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  /* ── Breakpoints — DS values (all five differ from Tailwind defaults) ── */
  --breakpoint-sm: 48rem; /* 768px  — DS Tablet */
  --breakpoint-md: 64rem; /* 1024px — DS Desktop */
  --breakpoint-lg: 90rem; /* 1440px — DS WideScreen */
  --breakpoint-xl: 120rem; /* 1920px — DS SuperWideScreen */
  --breakpoint-2xl: 160rem; /* 2560px — DS 4KScreen */

  /* DS typography scale — overrides Tailwind v4 defaults.
   * Existing utility classes (text-base, text-lg, text-xl, text-2xl, text-3xl)
   * now resolve to DS M / L / XL / 2XL / 3XL respectively.
   * text-sm and text-xs match Tailwind defaults (DS S and the Reapit sub-scale).
   * See plan/04-principal-decisions.md §Typography. */
  --text-xs: 0.75rem; /* 12px — Reapit sub-scale */
  --text-xs--line-height: 1rem; /* 16px */
  --text-sm: 0.875rem; /* 14px — DS S */
  --text-sm--line-height: 1.25rem; /* 20px */
  --text-base: 1rem; /* 16px — DS M */
  --text-base--line-height: 1.5rem; /* 24px */
  --text-lg: 1.25rem; /* 20px — DS L (override: Tailwind default = 18px) */
  --text-lg--line-height: 1.75rem; /* 28px */
  --text-xl: 1.5rem; /* 24px — DS XL (override: Tailwind default = 20px) */
  --text-xl--line-height: 2rem; /* 32px */
  --text-2xl: 1.75rem; /* 28px — DS 2XL (override: Tailwind default = 24px) */
  --text-2xl--line-height: 2.25rem; /* 36px */
  --text-3xl: 2.25rem; /* 36px — DS 3XL (override: Tailwind default = 30px) */
  --text-3xl--line-height: 2.75rem; /* 44px */
  /* text-4xl and above intentionally unmapped — DS does not define styles larger than 3XL.
     Components that previously relied on text-4xl/5xl should migrate to text-3xl. */

  --tracking-tight: -0.01em; /* DS 3XL letter-spacing — overrides Tailwind default */
}

/* ─────────────────────────────────────────────────────────────────────────────
   :root — Light Mode (default)
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* ══════════════════════════════════════════════════════
     PRIMITIVE COLOUR PALETTE
     All 91 stops in OKLCH. Values verified against DS hex
     via culori. Primitives are colour-space constants —
     they do not change in dark mode.
     ══════════════════════════════════════════════════════ */

  /* ── Purple (10 stops) ── */
  --purple-050: oklch(0.962 0.018 261.3); /* #ECF3FF */
  --purple-100: oklch(0.911 0.043 269.6); /* #D6E1FF */
  --purple-200: oklch(0.828 0.077 266.8); /* #B0C6FA */
  --purple-300: oklch(0.709 0.143 269.7); /* #7E9BFA */
  --purple-400: oklch(0.609 0.207 269.9); /* #5573FD */
  --purple-500: oklch(0.539 0.219 274); /* #4E56EA */
  --purple-600: oklch(0.493 0.22 275.8); /* #4844DA */
  --purple-700: oklch(0.45 0.215 276.4); /* #4036C8 */
  --purple-800: oklch(0.404 0.179 276.3); /* #3632A6 */
  --purple-900: oklch(0.343 0.15 274.2); /* #262884 */

  /* ── Neutral (12 stops + 025 + 150) ── */
  --neutral-025: oklch(
    0.983 0.003 286.4
  ); /* #F9F9FB — hue ~286° is correct; low-chroma tone is hue-ambiguous, the dE2000 to DS hex is 0 */
  --neutral-050: oklch(0.966 0.003 247.9); /* #F2F4F6 */
  --neutral-100: oklch(0.932 0.007 247.9); /* #E5E9ED */
  --neutral-150: oklch(0.898 0.01 247.9); /* #D8DEE4 */
  --neutral-200: oklch(0.847 0.015 244.7); /* #C5CED6 */
  --neutral-300: oklch(0.744 0.026 246.3); /* #9FAEBC */
  --neutral-400: oklch(0.635 0.038 248.4); /* #798DA1 */
  --neutral-500: oklch(0.563 0.047 248.7); /* #607890 */
  --neutral-600: oklch(0.495 0.04 248.6); /* #506478 */
  --neutral-700: oklch(0.428 0.033 248.6); /* #415161 */
  --neutral-800: oklch(0.359 0.028 250.7); /* #323E4B */
  --neutral-900: oklch(0.284 0.019 245.4); /* #222B33 */

  /* ── Blue (10 stops) ── */
  --blue-050: oklch(0.966 0.017 248); /* #EBF5FF */
  --blue-100: oklch(0.929 0.036 249.5); /* #D6EAFF */
  --blue-200: oklch(0.844 0.081 248.8); /* #A3D1FF */
  --blue-300: oklch(0.747 0.135 250.4); /* #66B2FF */
  --blue-400: oklch(0.663 0.184 252.9); /* #2994FF */
  --blue-500: oklch(0.615 0.211 256.1); /* #0080FF */
  --blue-600: oklch(0.54 0.184 255.9); /* #006BD6 */
  --blue-700: oklch(0.463 0.156 255.7); /* #0056AD */
  --blue-800: oklch(0.385 0.127 255); /* #004285 */
  --blue-900: oklch(0.302 0.095 253.5); /* #002E5C */

  /* ── Green (10 stops) ── */
  --green-050: oklch(0.973 0.019 152.8); /* #EDFAF0 */
  --green-100: oklch(0.943 0.037 151.4); /* #DBF4E0 */
  --green-200: oklch(0.879 0.087 150.6); /* #AEE8BA */
  --green-300: oklch(0.807 0.142 148.8); /* #79D98C */
  --green-400: oklch(0.742 0.189 146.9); /* #43CA5E */
  --green-500: oklch(0.706 0.21 145.3); /* #20C040 */
  --green-600: oklch(0.619 0.184 145.4); /* #1AA135 */
  --green-700: oklch(0.531 0.155 145.6); /* #15822B */
  --green-800: oklch(0.441 0.127 145.8); /* #106421 */
  --green-900: oklch(0.343 0.095 146.3); /* #0B4517 */

  /* ── Yellow (10 stops) — DS "pending" role ── */
  --yellow-050: oklch(0.979 0.018 78.2); /* #FFF7EB */
  --yellow-100: oklch(0.958 0.037 79.1); /* #FFEFD6 */
  --yellow-200: oklch(0.911 0.083 79.6); /* #FFDCA3 */
  --yellow-300: oklch(0.859 0.13 78.6); /* #FFC666 */
  --yellow-400: oklch(0.812 0.162 73.8); /* #FFAF29 */
  --yellow-500: oklch(0.784 0.172 68.1); /* #FFA000 */
  --yellow-600: oklch(0.688 0.151 68.4); /* #D68600 */
  --yellow-700: oklch(0.588 0.128 68.9); /* #AD6C00 */
  --yellow-800: oklch(0.487 0.106 69.9); /* #855300 */
  --yellow-900: oklch(0.377 0.081 71.3); /* #5C3900 */

  /* ── Orange (10 stops) — DS "warning" role ── */
  --orange-050: oklch(0.969 0.017 50.4); /* #FFF2EB */
  --orange-100: oklch(0.939 0.035 52); /* #FFE5D6 */
  --orange-200: oklch(0.867 0.081 51.7); /* #FFC5A3 */
  --orange-300: oklch(0.789 0.136 50.5); /* #FF9F66 */
  --orange-400: oklch(0.723 0.184 46.6); /* #FF7929 */
  --orange-500: oklch(0.688 0.209 41.7); /* #FF6000 */
  --orange-600: oklch(0.604 0.182 42); /* #D65000 */
  --orange-700: oklch(0.518 0.154 42.8); /* #AD4100 */
  --orange-800: oklch(0.43 0.125 43.8); /* #853200 */
  --orange-900: oklch(0.334 0.095 45.4); /* #5C2200 */

  /* ── Red (10 stops) — DS "error" role ── */
  --red-050: oklch(0.957 0.019 9.3); /* #FDECEE */
  --red-100: oklch(0.916 0.039 10.1); /* #FCD9DD */
  --red-200: oklch(0.818 0.092 11.7); /* #F9ABB4 */
  --red-300: oklch(0.716 0.16 15.4); /* #F67482 */
  --red-400: oklch(0.638 0.215 20.2); /* #F23D51 */
  --red-500: oklch(0.608 0.238 24.5); /* #F01830 */
  --red-600: oklch(0.533 0.207 24.3); /* #C91428 */
  --red-700: oklch(0.455 0.175 24); /* #A21020 */
  --red-800: oklch(0.378 0.144 23.2); /* #7D0C19 */
  --red-900: oklch(0.293 0.108 22.1); /* #560811 */

  /* ── Plum (10 stops) — DS "accent_2" role ── */
  --plum-050: oklch(0.975 0.016 310.1); /* #FAF4FF */
  --plum-100: oklch(0.889 0.046 314.6); /* #E6D2F0 */
  --plum-200: oklch(0.769 0.096 320.5); /* #D0A0DA */
  --plum-300: oklch(0.676 0.141 320.3); /* #BD78CC */
  --plum-400: oklch(0.597 0.19 320); /* #AF50C4 */
  --plum-500: oklch(0.526 0.206 318.8); /* #9A32B4 */
  --plum-600: oklch(0.494 0.199 316.7); /* #8C2CAA */
  --plum-700: oklch(0.458 0.199 314.2); /* #7E20A2 */
  --plum-800: oklch(0.416 0.195 311.8); /* #6E1296 */
  --plum-900: oklch(0.366 0.177 309.5); /* #5A0A82 */

  /* ── Teal (10 stops) — DS "accent_1" role ── */
  --teal-050: oklch(0.968 0.025 196.7); /* #E2FAFA */
  --teal-100: oklch(0.936 0.057 201.7); /* #BEF6FA */
  --teal-200: oklch(0.861 0.084 203.3); /* #8CE2EA */
  --teal-300: oklch(0.797 0.113 202.4); /* #50D2DC */
  --teal-400: oklch(0.748 0.125 202.8); /* #14C4D0 */
  --teal-500: oklch(0.681 0.117 207.9); /* #00ACBE */
  --teal-600: oklch(0.617 0.107 211.2); /* #0096AA */
  --teal-700: oklch(0.556 0.096 209.8); /* #008292 */
  --teal-800: oklch(0.46 0.079 206.7); /* #00646E */
  --teal-900: oklch(0.395 0.068 209.2); /* #00505A */

  /* ── White ── */
  --white-900: oklch(1 0 0); /* #FFFFFF */

  /* ══════════════════════════════════════════════════════
     DS SEMANTIC COLOUR ALIASES
     All reference the primitive palette above via var().
     ══════════════════════════════════════════════════════ */

  /* ── Text ── */
  --text-primary: var(--neutral-900); /* colour.text.primary   #222B33 */
  --text-secondary: var(--neutral-500); /* colour.text.secondary #607890 */
  --text-tertiary: var(--neutral-700); /* colour.text.tertiary  #415161 */
  --text-placeholder: var(--neutral-300); /* colour.text.placeholder #9FAEBC */
  --text-white: var(--white-900); /* colour.text.white     #FFFFFF */
  --text-action: var(--purple-500); /* colour.text.action    #4E56EA */
  --text-pending: var(--yellow-600); /* colour.text.pending   #D68600 */
  --text-warning: var(--orange-500); /* colour.text.warning   #FF6000 */
  --text-error: var(--red-500); /* colour.text.error     #F01830 */
  --text-success: var(--green-600); /* colour.text.success   #1AA135 */
  --text-info: var(--blue-500); /* colour.text.info      #0080FF */
  --text-accent-1: var(--teal-600); /* colour.text.accent_1  #0096AA */
  --text-accent-2: var(--plum-500); /* colour.text.accent_2  #9A32B4 */

  /* ── Icon ── */
  /* Note: DS icon.primary = neutral-300 (#9FAEBC) — lighter than text-secondary.
     This is intentional per DS spec (idle/placeholder icon colour). See plan/04. */
  --icon-primary: var(--neutral-300); /* colour.icon.primary   #9FAEBC */
  --icon-secondary: var(--neutral-500); /* colour.icon.secondary #607890 */
  --icon-disabled: var(--neutral-100); /* colour.icon.disabled  #E5E9ED */
  --icon-white: var(--white-900); /* colour.icon.white     #FFFFFF */
  --icon-action: var(--purple-500); /* colour.icon.action    #4E56EA */
  --icon-pending: var(--yellow-600); /* colour.icon.pending   #D68600 */
  --icon-warning: var(--orange-500); /* colour.icon.warning   #FF6000 */
  --icon-error: var(--red-500); /* colour.icon.error     #F01830 */
  --icon-success: var(--green-600); /* colour.icon.success   #1AA135 */
  --icon-info: var(--blue-500); /* colour.icon.info      #0080FF */
  --icon-star: var(--yellow-500); /* colour.icon.star      #FFA000 */
  --icon-accent-1: var(--teal-600); /* colour.icon.accent_1  #0096AA */
  --icon-accent-2: var(--plum-500); /* colour.icon.accent_2  #9A32B4 */

  /* ── Border ── */
  --border-neutral-light: var(--neutral-100); /* colour.border.neutral.light_default  #E5E9ED */
  --border-neutral-light-darker: var(--neutral-150); /* colour.border.neutral.light_darker   #D8DEE4 */
  --border-neutral-dark: var(--neutral-500); /* colour.border.neutral.dark           #607890 */
  --border-white: var(--white-900); /* colour.border.white                  #FFFFFF */
  --border-focus: var(--purple-300); /* colour.border.focus                  #7E9BFA */

  --border-action-lightest: var(--purple-100); /* colour.border.action.lightest  #D6E1FF */
  --border-action-light: var(--purple-200); /* colour.border.action.light     #B0C6FA */
  --border-action: var(--purple-500); /* colour.border.action.default   #4E56EA */

  --border-pending-lightest: var(--yellow-100); /* colour.border.pending.lightest #FFEFD6 */
  --border-pending-light: var(--yellow-200); /* colour.border.pending.light    #FFDCA3 */
  --border-pending: var(--yellow-600); /* colour.border.pending.default  #D68600 */

  --border-warning-lightest: var(--orange-100); /* colour.border.warning.lightest #FFE5D6 */
  --border-warning-light: var(--orange-200); /* colour.border.warning.light    #FFC5A3 */
  --border-warning: var(--orange-500); /* colour.border.warning.default  #FF6000 */

  --border-error-lightest: var(--red-100); /* colour.border.error.lightest   #FCD9DD */
  --border-error-light: var(--red-200); /* colour.border.error.light      #F9ABB4 */
  --border-error: var(--red-500); /* colour.border.error.default    #F01830 */

  --border-success-lightest: var(--green-100); /* colour.border.success.lightest #DBF4E0 */
  --border-success-light: var(--green-200); /* colour.border.success.light    #AEE8BA */
  --border-success: var(--green-500); /* colour.border.success.default  #20C040 */

  --border-info-lightest: var(--blue-100); /* colour.border.info.lightest    #D6EAFF */
  --border-info-light: var(--blue-200); /* colour.border.info.light       #A3D1FF */
  --border-info: var(--blue-500); /* colour.border.info.default     #0080FF */

  --border-accent-1-lightest: var(--teal-100); /* colour.border.accent_1.lightest #BEF6FA */
  --border-accent-1-light: var(--teal-200); /* colour.border.accent_1.light    #8CE2EA */
  --border-accent-1: var(--teal-600); /* colour.border.accent_1.default  #0096AA */

  --border-accent-2-lightest: var(--plum-100); /* colour.border.accent_2.lightest #E6D2F0 */
  --border-accent-2-light: var(--plum-200); /* colour.border.accent_2.light    #D0A0DA */
  --border-accent-2: var(--plum-500); /* colour.border.accent_2.default  #9A32B4 */

  /* ── Fill ── */
  --fill-subtle: var(--neutral-025); /* colour.fill.neutral.subtle     #F9F9FB */
  --fill-neutral-lightest: var(--neutral-050); /* colour.fill.neutral.lightest   #F2F4F6 */
  --fill-neutral-light: var(--neutral-100); /* colour.fill.neutral.light      #E5E9ED */
  --fill-neutral-medium: var(--neutral-300); /* colour.fill.neutral.medium     #9FAEBC */
  --fill-neutral-dark: var(--neutral-500); /* colour.fill.neutral.dark       #607890 */
  --fill-neutral-darkest: var(--neutral-900); /* colour.fill.neutral.darkest    #222B33 */
  --fill-white: var(--white-900); /* colour.fill.white              #FFFFFF */

  --fill-action-lightest: var(--purple-050); /* colour.fill.action.lightest  #ECF3FF */
  --fill-action-light: var(--purple-100); /* colour.fill.action.light     #D6E1FF */
  --fill-action-dark: var(--purple-500); /* colour.fill.action.dark      #4E56EA */

  --fill-pending-lightest: var(--yellow-050); /* colour.fill.pending.lightest  #FFF7EB */
  --fill-pending-light: var(--yellow-100); /* colour.fill.pending.light     #FFEFD6 */
  --fill-pending-dark: var(--yellow-600); /* colour.fill.pending.dark      #D68600 */

  --fill-warning-lightest: var(--orange-050); /* colour.fill.warning.lightest  #FFF2EB */
  --fill-warning-light: var(--orange-100); /* colour.fill.warning.light     #FFE5D6 */
  --fill-warning-dark: var(--orange-500); /* colour.fill.warning.dark      #FF6000 */

  --fill-error-lightest: var(--red-050); /* colour.fill.error.lightest  #FDECEE */
  --fill-error-light: var(--red-100); /* colour.fill.error.light     #FCD9DD */
  --fill-error-dark: var(--red-500); /* colour.fill.error.dark      #F01830 */

  --fill-success-lightest: var(--green-050); /* colour.fill.success.lightest  #EDFAF0 */
  --fill-success-light: var(--green-100); /* colour.fill.success.light     #DBF4E0 */
  --fill-success-dark: var(--green-500); /* colour.fill.success.dark      #20C040 */

  --fill-info-lightest: var(--blue-050); /* colour.fill.info.lightest  #EBF5FF */
  --fill-info-light: var(--blue-100); /* colour.fill.info.light     #D6EAFF */
  --fill-info-dark: var(--blue-500); /* colour.fill.info.dark      #0080FF */

  --fill-accent-1-lightest: var(--teal-050); /* colour.fill.accent_1.lightest  #E2FAFA */
  --fill-accent-1-light: var(--teal-100); /* colour.fill.accent_1.light     #BEF6FA */
  --fill-accent-1-dark: var(--teal-600); /* colour.fill.accent_1.dark      #0096AA */

  --fill-accent-2-lightest: var(--plum-050); /* colour.fill.accent_2.lightest  #FAF4FF */
  --fill-accent-2-light: var(--plum-100); /* colour.fill.accent_2.light     #E6D2F0 */
  --fill-accent-2-dark: var(--plum-500); /* colour.fill.accent_2.dark      #9A32B4 */

  /* ══════════════════════════════════════════════════════
     SHADCN SEMANTIC ALIASES
     Names unchanged — only the var() references updated to
     point at the new DS semantic aliases.
     ══════════════════════════════════════════════════════ */

  /* Core brand */
  --primary: var(--fill-action-dark); /* #4E56EA */
  --primary-foreground: var(--text-white); /* #FFFFFF */

  /* Secondary surface */
  --secondary: var(--fill-neutral-lightest); /* #F2F4F6 */
  --secondary-foreground: var(--text-primary); /* #222B33 */

  /* Page/card backgrounds */
  --background: var(--fill-white); /* #FFFFFF */
  --foreground: var(--text-primary); /* #222B33 */

  --card: var(--fill-white); /* #FFFFFF */
  --card-foreground: var(--text-primary); /* #222B33 */

  --popover: var(--fill-white); /* #FFFFFF */
  --popover-foreground: var(--text-primary); /* #222B33 */

  /* Muted surfaces */
  --muted: var(--fill-neutral-lightest); /* #F2F4F6 */
  --muted-foreground: var(--text-secondary); /* #607890 */

  /* Accent surfaces */
  --accent: var(--fill-action-lightest); /* #ECF3FF */
  --accent-foreground: var(--text-primary); /* #222B33 */

  /* Destructive */
  --destructive: var(--fill-error-dark); /* #F01830 */
  --destructive-foreground: var(--text-white); /* #FFFFFF */

  /* Borders & inputs */
  --border: var(--border-neutral-light); /* #E5E9ED */
  --input: var(--border-neutral-light-darker); /* #D8DEE4 */
  --ring: var(--border-focus); /* #7E9BFA */

  /* Radius — central value; --radius-lg aliases this in @theme inline */
  --radius: 0.5rem; /* 8px — DS border-radius-l */

  /* ══════════════════════════════════════════════════════
     CHART COLOURS
     Refactored to reference DS semantic fill ramps.
     ══════════════════════════════════════════════════════ */
  --chart-1: var(--fill-action-dark); /* purple-500 #4E56EA */
  --chart-2: var(--fill-accent-1-dark); /* teal-600   #0096AA */
  --chart-3: var(--fill-accent-2-dark); /* plum-500   #9A32B4 */
  --chart-4: var(--fill-pending-dark); /* yellow-600 #D68600 */
  --chart-5: var(--fill-error-dark); /* red-500    #F01830 */

  /* ══════════════════════════════════════════════════════
     SIDEBAR COLOURS
     Aligned to DS v5 comp-navigation tokens:
     --comp-navigation-colour-fill-sidebar-default: #ffffff
     --comp-navigation-colour-fill-sidebar-hover: #e5e9ed
     --comp-navigation-colour-fill-sidebar-select: #f2f4f6
     --comp-navigation-colour-text-sidebar-default: #506478
     --comp-navigation-colour-text-sidebar-select: #4e56ea
     --comp-navigation-colour-icon-sidebar-default: #798da1
     --comp-navigation-colour-icon-sidebar-select: #4e56ea
     ══════════════════════════════════════════════════════ */
  --sidebar: var(--fill-white); /* #FFFFFF — v5 sidebar bg */
  --sidebar-foreground: var(--text-secondary); /* #506478 — v5 sidebar text default */
  --sidebar-primary: var(--fill-action-dark); /* #4E56EA */
  --sidebar-primary-foreground: var(--text-white); /* #FFFFFF */
  --sidebar-accent: var(--fill-neutral-light); /* #E5E9ED — v5 sidebar hover bg */
  --sidebar-accent-foreground: var(--text-primary); /* #222B33 */
  --sidebar-border: var(--border-neutral-light); /* #E5E9ED */
  --sidebar-ring: var(--border-focus); /* #7E9BFA */

  /* ══════════════════════════════════════════════════════
     LEGACY ALERT / BADGE ALIASES
     "warning" historically meant yellow (DS "pending").
     Kept for backwards-compat — point at new DS semantic vars.
     ══════════════════════════════════════════════════════ */

  /* Alert / Section Message colours */
  /* info: DS fill.info.light bg, border.info.light border, icon.info icon */
  --alert-info-bg: var(--fill-info-light); /* blue-100  #D6EAFF */
  --alert-info-border: var(--border-info-light); /* blue-200  #A3D1FF */
  --alert-info-foreground: var(--text-primary); /* neutral-900 */
  --alert-info-icon: var(--icon-info); /* blue-500  #0080FF */

  /* success: DS fill.success.light bg, border.success.light border, icon.success icon */
  --alert-success-bg: var(--fill-success-light); /* green-100 #DBF4E0 */
  --alert-success-border: var(--border-success-light); /* green-200 #AEE8BA */
  --alert-success-foreground: var(--text-primary); /* neutral-900 */
  --alert-success-icon: var(--icon-success); /* green-600 #1AA135 */

  /* warning (= DS "pending"/yellow — see naming note above) */
  --alert-warning-bg: var(--fill-pending-light); /* yellow-100 #FFEFD6 */
  --alert-warning-border: var(--border-pending-light); /* yellow-200 #FFDCA3 */
  --alert-warning-foreground: var(--text-primary); /* neutral-900 */
  --alert-warning-icon: var(--icon-pending); /* yellow-600 #D68600 */

  /* error: DS fill.error.lightest bg, border.error.light border, icon.error icon */
  --alert-error-bg: var(--fill-error-lightest); /* red-050 #FDECEE */
  --alert-error-border: var(--border-error-light); /* red-200 #F9ABB4 */
  --alert-error-foreground: var(--text-primary); /* neutral-900 */
  --alert-error-icon: var(--icon-error); /* red-500 #F01830 */

  /* Badge semantic colours */
  /* neutral */
  --badge-neutral: var(--fill-neutral-light); /* neutral-100 #E5E9ED */
  --badge-neutral-foreground: var(--text-tertiary); /* neutral-700 #415161 */
  /* success */
  --badge-success: var(--fill-success-light); /* green-100  #DBF4E0 */
  --badge-success-foreground: var(--text-success); /* green-600  #1AA135 */
  /* pending (= DS "info"/blue) */
  --badge-pending: var(--fill-info-light); /* blue-100   #D6EAFF */
  --badge-pending-foreground: var(--text-info); /* blue-500   #0080FF */
  /* warning (= DS "pending"/yellow — backwards-compat alias) */
  --badge-warning: var(--fill-pending-light); /* yellow-100 #FFEFD6 */
  --badge-warning-foreground: var(--text-pending); /* yellow-600 #D68600 */
  /* danger */
  --badge-danger: var(--fill-error-lightest); /* red-050    #FDECEE */
  --badge-danger-foreground: var(--text-error); /* red-500    #F01830 */
  /* inactive */
  --badge-inactive: var(--fill-neutral-lightest); /* neutral-050 #F2F4F6 */
  --badge-inactive-foreground: var(--muted-foreground); /* neutral-500 #607890 */
  /* accent-1 (teal) */
  --badge-accent-1: var(--fill-accent-1-lightest); /* teal-050 #E2FAFA */
  --badge-accent-1-foreground: var(--text-accent-1); /* teal-600 #0096AA */
  /* accent-2 (plum) */
  --badge-accent-2: var(--fill-accent-2-lightest); /* plum-050 #FAF4FF */
  --badge-accent-2-foreground: var(--text-accent-2); /* plum-500 #9A32B4 */

  /* ══════════════════════════════════════════════════════
     BORDER RADIUS
     Absolute values replacing the previous calc() formulas.
     Keeps --radius as the central value for ShadCN compat.
     ══════════════════════════════════════════════════════ */
  /* (Exposed via @theme inline above as --radius-xs through --radius-2xl) */

  /* ══════════════════════════════════════════════════════
     TYPOGRAPHY SCALE
     DS font styles (3XL→S) plus XS sub-scale.
     Values confirmed against Principal decisions (plan/04).
     ══════════════════════════════════════════════════════ */
  --font-size-xs: 0.75rem; /* 12px — sub-scale (XS, not in DS named scale) */
  --font-size-s: 0.875rem; /* 14px — DS S */
  --font-size-m: 1rem; /* 16px — DS M (body default) */
  --font-size-l: 1.25rem; /* 20px — DS L */
  --font-size-xl: 1.5rem; /* 24px — DS XL */
  --font-size-2xl: 1.75rem; /* 28px — DS 2XL */
  --font-size-3xl: 2.25rem; /* 36px — DS 3XL */

  --line-height-xs: 1rem; /* 16px */
  --line-height-s: 1.25rem; /* 20px */
  --line-height-m: 1.5rem; /* 24px */
  --line-height-l: 1.75rem; /* 28px */
  --line-height-xl: 2rem; /* 32px */
  --line-height-2xl: 2.25rem; /* 36px */
  --line-height-3xl: 2.75rem; /* 44px */

  --letter-spacing-tight: -0.01em; /* DS 3XL only */

  /* ══════════════════════════════════════════════════════
     ICON SIZE TOKENS
     ══════════════════════════════════════════════════════ */
  --icon-size-xs: 0.75rem; /* 12px — compact metadata */
  --icon-size-sm: 1rem; /* 16px — inline body / dense lists / chips */
  --icon-size-md: 1.25rem; /* 20px — buttons / inputs / nav (DS default) */
  --icon-size-lg: 1.5rem; /* 24px — hero / large CTAs */
  --icon-size-xl: 2rem; /* 32px */
}

/* ─────────────────────────────────────────────────────────────────────────────
   .dark — Dark Mode Overrides
   No DS dark mode tokens exist. Values below are inversions/derivations
   of the light mode palette — flag for Designer review before shipping
   a production dark theme.
   ──────────────────────────────────────────────────────────────────────────── */
.dark {
  /* ── ShadCN semantic aliases ── */
  --background: var(--neutral-900); /* #222B33 */
  --foreground: var(--neutral-050); /* #F2F4F6 */

  --card: oklch(0.32 0.018 245.4); /* dark surface, between neutral-800/900 */
  --card-foreground: var(--neutral-050); /* #F2F4F6 */

  --popover: oklch(0.32 0.018 245.4);
  --popover-foreground: var(--neutral-050);

  --primary: var(--purple-300); /* lighter purple for dark bg #7E9BFA */
  --primary-foreground: var(--neutral-900); /* #222B33 */

  --secondary: oklch(0.35 0.015 245.4); /* dark neutral surface */
  --secondary-foreground: var(--neutral-050);

  --muted: oklch(0.35 0.015 245.4);
  --muted-foreground: var(--neutral-400); /* #798DA1 */

  --accent: oklch(0.35 0.015 245.4);
  --accent-foreground: var(--neutral-050);

  --destructive: var(--red-500); /* #F01830 */
  --destructive-foreground: var(--neutral-050);

  --border: oklch(0.35 0.015 245.4);
  --input: oklch(0.35 0.015 245.4);
  --ring: var(--purple-500); /* #4E56EA */

  /* ── Sidebar dark ── */
  --sidebar: oklch(0.26 0.019 245.4); /* darker than card */
  --sidebar-foreground: var(--neutral-050);
  --sidebar-primary: var(--purple-300);
  --sidebar-primary-foreground: var(--neutral-900);
  --sidebar-accent: oklch(0.35 0.015 245.4);
  --sidebar-accent-foreground: var(--neutral-050);
  --sidebar-border: oklch(0.35 0.015 245.4);
  --sidebar-ring: var(--purple-500);

  /* ── Chart dark — lighter variants for visibility on dark backgrounds ── */
  --chart-1: var(--purple-300); /* #7E9BFA */
  --chart-2: var(--teal-400); /* #14C4D0 */
  --chart-3: var(--plum-300); /* #BD78CC */
  --chart-4: var(--yellow-400); /* #FFAF29 */
  --chart-5: var(--red-400); /* #F23D51 */

  /* ── DS semantic text aliases (dark inversions) ── */
  --text-primary: var(--neutral-050); /* inverted: light on dark */
  --text-secondary: var(--neutral-400); /* #798DA1 */
  --text-tertiary: var(--neutral-300); /* #9FAEBC */
  --text-placeholder: var(--neutral-500); /* #607890 */
  --text-white: var(--white-900); /* unchanged */
  --text-action: var(--purple-300); /* lighter purple #7E9BFA */
  --text-pending: var(--yellow-400); /* lighter yellow #FFAF29 */
  --text-warning: var(--orange-400); /* lighter orange #FF7929 */
  --text-error: var(--red-400); /* lighter red    #F23D51 */
  --text-success: var(--green-400); /* lighter green  #43CA5E */
  --text-info: var(--blue-400); /* lighter blue   #2994FF */
  --text-accent-1: var(--teal-400); /* lighter teal   #14C4D0 */
  --text-accent-2: var(--plum-300); /* lighter plum   #BD78CC */

  /* ── DS semantic icon aliases (dark inversions) ── */
  --icon-primary: var(--neutral-500); /* #607890 */
  --icon-secondary: var(--neutral-400); /* #798DA1 */
  --icon-disabled: var(--neutral-700); /* #415161 */
  --icon-white: var(--white-900); /* unchanged */
  --icon-action: var(--purple-300); /* #7E9BFA */
  --icon-pending: var(--yellow-400); /* #FFAF29 */
  --icon-warning: var(--orange-400); /* #FF7929 */
  --icon-error: var(--red-400); /* #F23D51 */
  --icon-success: var(--green-400); /* #43CA5E */
  --icon-info: var(--blue-400); /* #2994FF */
  --icon-star: var(--yellow-400); /* #FFAF29 */
  --icon-accent-1: var(--teal-400); /* #14C4D0 */
  --icon-accent-2: var(--plum-300); /* #BD78CC */

  /* ── DS semantic border aliases (dark inversions) ── */
  --border-neutral-light: oklch(0.35 0.015 245.4);
  --border-neutral-light-darker: oklch(0.4 0.02 245.4);
  --border-neutral-dark: var(--neutral-400);
  --border-white: var(--white-900);
  --border-focus: var(--purple-400);

  --border-action-lightest: oklch(0.35 0.035 270);
  --border-action-light: oklch(0.42 0.06 270);
  --border-action: var(--purple-400);

  --border-pending-lightest: oklch(0.45 0.04 75);
  --border-pending-light: oklch(0.55 0.08 72);
  --border-pending: var(--yellow-500);

  --border-warning-lightest: oklch(0.45 0.04 50);
  --border-warning-light: oklch(0.55 0.08 46);
  --border-warning: var(--orange-400);

  --border-error-lightest: oklch(0.4 0.04 15);
  --border-error-light: oklch(0.5 0.1 15);
  --border-error: var(--red-400);

  --border-success-lightest: oklch(0.4 0.04 148);
  --border-success-light: oklch(0.5 0.09 147);
  --border-success: var(--green-500);

  --border-info-lightest: oklch(0.4 0.04 250);
  --border-info-light: oklch(0.5 0.09 252);
  --border-info: var(--blue-400);

  --border-accent-1-lightest: oklch(0.4 0.04 203);
  --border-accent-1-light: oklch(0.5 0.065 205);
  --border-accent-1: var(--teal-500);

  --border-accent-2-lightest: oklch(0.4 0.06 315);
  --border-accent-2-light: oklch(0.48 0.1 317);
  --border-accent-2: var(--plum-400);

  /* ── DS semantic fill aliases (dark inversions) ── */
  --fill-subtle: oklch(0.3 0.018 245.4);
  --fill-neutral-lightest: oklch(0.35 0.015 245.4);
  --fill-neutral-light: oklch(0.4 0.02 245.4);
  --fill-neutral-medium: var(--neutral-600);
  --fill-neutral-dark: var(--neutral-400);
  --fill-neutral-darkest: var(--neutral-050);
  --fill-white: var(--white-900);

  --fill-action-lightest: oklch(0.32 0.06 270);
  --fill-action-light: oklch(0.42 0.11 270);
  --fill-action-dark: var(--purple-400);

  --fill-pending-lightest: oklch(0.32 0.05 78);
  --fill-pending-light: oklch(0.42 0.09 78);
  --fill-pending-dark: var(--yellow-500);

  --fill-warning-lightest: oklch(0.32 0.05 45);
  --fill-warning-light: oklch(0.42 0.1 45);
  --fill-warning-dark: var(--orange-400);

  --fill-error-lightest: oklch(0.32 0.05 12);
  --fill-error-light: oklch(0.42 0.1 12);
  --fill-error-dark: var(--red-400);

  --fill-success-lightest: oklch(0.32 0.05 148);
  --fill-success-light: oklch(0.42 0.1 148);
  --fill-success-dark: var(--green-500);

  --fill-info-lightest: oklch(0.32 0.05 250);
  --fill-info-light: oklch(0.42 0.1 252);
  --fill-info-dark: var(--blue-400);

  --fill-accent-1-lightest: oklch(0.32 0.05 203);
  --fill-accent-1-light: oklch(0.42 0.09 205);
  --fill-accent-1-dark: var(--teal-500);

  --fill-accent-2-lightest: oklch(0.32 0.07 315);
  --fill-accent-2-light: oklch(0.42 0.13 317);
  --fill-accent-2-dark: var(--plum-400);

  /* ── Alert / Badge dark (reference updated semantic vars above) ── */
  --alert-info-bg: var(--fill-info-light);
  --alert-info-border: var(--border-info-light);
  --alert-info-foreground: var(--text-primary);
  --alert-info-icon: var(--icon-info);

  --alert-success-bg: var(--fill-success-light);
  --alert-success-border: var(--border-success-light);
  --alert-success-foreground: var(--text-primary);
  --alert-success-icon: var(--icon-success);

  --alert-warning-bg: var(--fill-pending-light);
  --alert-warning-border: var(--border-pending-light);
  --alert-warning-foreground: var(--text-primary);
  --alert-warning-icon: var(--icon-pending);

  --alert-error-bg: var(--fill-error-lightest);
  --alert-error-border: var(--border-error-light);
  --alert-error-foreground: var(--text-primary);
  --alert-error-icon: var(--icon-error);

  --badge-neutral: var(--neutral-600);
  --badge-neutral-foreground: var(--neutral-100);
  --badge-success: var(--fill-success-light);
  --badge-success-foreground: var(--text-success);
  --badge-pending: var(--fill-info-light);
  --badge-pending-foreground: var(--text-info);
  --badge-warning: var(--fill-pending-light);
  --badge-warning-foreground: var(--text-pending);
  --badge-danger: var(--fill-error-lightest);
  --badge-danger-foreground: var(--text-error);
  --badge-inactive: var(--neutral-700);
  --badge-inactive-foreground: var(--neutral-050);
  --badge-accent-1: var(--fill-accent-1-lightest);
  --badge-accent-1-foreground: var(--text-accent-1);
  --badge-accent-2: var(--fill-accent-2-lightest);
  --badge-accent-2-foreground: var(--text-accent-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Global resets
   ──────────────────────────────────────────────────────────────────────────── */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Keyframe animations
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Icon colour data-attributes
   Maps each `data-colour` value on an SVG icon element to the corresponding
   `--icon-*` semantic CSS variable. Colour is applied via the CSS `color`
   property; SVG paths use `fill: currentColor` so they inherit automatically.

   Usage: <svg data-colour="action" /> → color: var(--icon-action)

   When `data-colour` is absent, colour inherits from the surrounding context.
   ──────────────────────────────────────────────────────────────────────────── */
[data-colour='primary'] {
  color: var(--icon-primary);
}
[data-colour='secondary'] {
  color: var(--icon-secondary);
}
[data-colour='disabled'] {
  color: var(--icon-disabled);
}
[data-colour='white'] {
  color: var(--icon-white);
}
[data-colour='action'] {
  color: var(--icon-action);
}
[data-colour='pending'] {
  color: var(--icon-pending);
}
[data-colour='warning'] {
  color: var(--icon-warning);
}
[data-colour='error'] {
  color: var(--icon-error);
}
[data-colour='success'] {
  color: var(--icon-success);
}
[data-colour='info'] {
  color: var(--icon-info);
}
[data-colour='star'] {
  color: var(--icon-star);
}
[data-colour='accent-1'] {
  color: var(--icon-accent-1);
}
[data-colour='accent-2'] {
  color: var(--icon-accent-2);
}