/* ==========================================================================
   Flyins design tokens — mirrors the Figma variables in "Flyins 2.0"
   (Primitives / Semantic / Typography / Scale collections).
   ========================================================================== */
:root {
  /* ---- Primitives: Purple -------------------------------------------- */
  --purple-50: #f7f6fe;  --purple-100: #ebe9ff; --purple-200: #dad6ff;
  --purple-300: #beb5fe; --purple-400: #9881f8; --purple-500: #7650e1;
  --purple-600: #673ece; --purple-700: #5b32ba; --purple-800: #4e29a1;
  --purple-900: #412388; --purple-950: #291559;

  /* ---- Primitives: Slate --------------------------------------------- */
  --slate-50: #f8fafc;  --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
  --slate-900: #0f172a; --slate-950: #020617;

  --white: #ffffff;
  --black: #0a090b;

  /* ---- Primitives: Status -------------------------------------------- */
  --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981;
  --success-600: #059669; --success-700: #047857;
  --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b;
  --warning-600: #d97706; --warning-700: #b45309;
  --danger-50: #fef2f2;  --danger-100: #fee2e2;  --danger-500: #ef4444;
  --danger-600: #dc2626; --danger-700: #b91c1c;
  --info-50: #eff6ff;    --info-100: #dbeafe;    --info-500: #3b82f6;
  --info-600: #2563eb;   --info-700: #1d4ed8;

  /* ---- Semantic: Brand ----------------------------------------------- */
  --brand-default: var(--purple-500);
  --brand-hover: var(--purple-600);
  --brand-active: var(--purple-700);
  --brand-subtle: var(--purple-50);
  --brand-subtle-hover: var(--purple-100);
  --brand-border: var(--purple-200);
  --brand-text: var(--purple-700);
  --brand-on-brand: var(--white);
  --brand-on-subtle: var(--purple-700);

  /* ---- Semantic: Background ------------------------------------------ */
  --background-canvas: var(--slate-50);
  --background-surface: var(--white);
  --background-sunken: var(--slate-100);
  --background-hover: var(--slate-50);
  --background-disabled: var(--slate-100);
  --background-strong: var(--slate-400);
  --background-inverse: var(--slate-900);

  /* ---- Semantic: Border ---------------------------------------------- */
  --border-default: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-disabled: var(--slate-200);

  /* ---- Semantic: Text ------------------------------------------------ */
  --text-heading: var(--slate-950);
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-disabled: var(--slate-400);
  --text-inverse: var(--white);

  /* ---- Semantic: Status ---------------------------------------------- */
  --status-success: var(--success-600); --status-success-subtle: var(--success-50); --status-success-text: var(--success-700);
  --status-warning: var(--warning-600); --status-warning-subtle: var(--warning-50); --status-warning-text: var(--warning-700);
  --status-danger: var(--danger-600);   --status-danger-subtle: var(--danger-50);   --status-danger-text: var(--danger-700);
  --status-danger-hover: var(--danger-700);
  --status-info: var(--info-600);       --status-info-subtle: var(--info-50);       --status-info-text: var(--info-700);

  --focus-ring: var(--purple-400);
  --tag-bg: var(--slate-100);                    /* neutral tag (a store) */
  --tag-border: var(--slate-200);
  --tag-text: var(--slate-700);

  /* Motion — subtle, system-like (per user): short, small, standard easing.
     Every use is switched off under prefers-reduced-motion (see base.css). */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* Loading skeletons */
  --skeleton-bg: var(--slate-200);
  --skeleton-sheen: var(--slate-100);

  /* Inverse toast (per user): darkest slate, icon | divider | message */
  --toast-inverse-bg: var(--slate-900);          /* per user — was slate-950 */
  --toast-inverse-border: var(--slate-800);
  --toast-inverse-divider: var(--slate-700);      /* subtle slate line between icon and message */
  --toast-inverse-text: var(--white);
  --toast-inverse-muted: var(--slate-400);
  --toast-inverse-action: #b4a8fd;                /* brand purple is only ~3:1 on slate-950 */
  --tag-neutral-text: var(--slate-600);          /* Inactive: quieter than a store pill, still AA on --tag-bg */
  --icon-sort: var(--slate-500);                 /* sort arrows, idle */
  --icon-sort-active: var(--text-primary);       /* sorted column / hover */
  --icon-color: var(--slate-600);

  /* ---- Semantic: extended (added for theming — light values match the Figma file) ---- */
  color-scheme: light;
  --background-page: var(--white);
  --on-danger: var(--white);                  /* text on danger fills */
  --background-raised: var(--white);          /* menus, popovers, toasts, modals */
  --background-selected: var(--white);        /* selected tab / segment */
  --background-thead: var(--brand-subtle-hover);
  --background-row-hover: var(--brand-subtle);
  --secondary-hover-bg: var(--brand-subtle);
  --secondary-hover-border: var(--brand-fg);
  --option-selected-bg: var(--brand-subtle);
  --background-striped: var(--background-canvas);
  --border-control: var(--slate-300);         /* inputs, dropdowns, secondary buttons */
  --border-input: var(--border-control);            /* inputs, dropdowns, search, date & number fields */
  --border-control-hover: var(--slate-400);
  --border-subtle: var(--slate-100);          /* dividers inside menus / modals */
  --text-label: var(--slate-700);
  --text-placeholder: var(--slate-500);
  --text-pagination: #adb5bd;                 /* Figma "Gray/Gray-5" */
  --brand-fg: var(--brand-default);           /* brand used as text / icon colour */
  --brand-fill-border: var(--brand-default);  /* outline of checked checkboxes */
  --brand-fg-hover: var(--brand-hover);
  --brand-fg-strong: var(--purple-800);
  --brand-selected: var(--purple-600);
  --danger-fg: var(--danger-700);             /* destructive text actions (Log out, Sign out, Reject) */
  --danger-fg-hover: #991b1b;
  --required-color: var(--status-danger);
  --switch-off: var(--slate-300);
  --switch-off-hover: var(--slate-400);
  --switch-knob: var(--white);
  --footer-bg: var(--purple-700);
  --footer-link: var(--purple-300);
  --footer-link-hover: var(--white);
  --footer-line: var(--purple-600);
  --footer-copy: var(--purple-400);
  --backdrop: rgba(15, 23, 42, 0.5);
  --shadow-sm: 0 2px 2px 0 rgba(33, 37, 41, 0.08);
  --shadow-menu: 0 2px 1px rgba(33, 37, 41, 0.08);
  --shadow-tab: 0 2px 2px rgba(203, 213, 225, 0.3);
  --shadow-popover: 0 2px 1px rgba(33, 37, 41, 0.08), 0 8px 24px -8px rgba(15, 23, 42, 0.16);
  --shadow-header: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
  --shadow-bar: 0 -4px 12px -6px rgba(15, 23, 42, 0.12);   /* bottom bar — same as header, cast upward */
  --shadow-knob: 0 0 0 1px rgba(10, 9, 11, .05), 0 2px 2px -1px rgba(10, 9, 11, .04), 0 2px 12px -1px rgba(10, 9, 11, .10);

  /* ---- Typography ---------------------------------------------------- */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Scale: Spacing ------------------------------------------------ */
  --space-2: 2px;  --space-4: 4px;  --space-6: 6px;  --space-8: 8px;
  --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;

  /* ---- Scale: Radius ------------------------------------------------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-full: 999px;

  /* ---- Scale: Size --------------------------------------------------- */
  --control-sm: 28px; --control-md: 34px; --control-lg: 42px;
  --icon-sm: 14px; --icon-md: 16px;
  --border-1: 1px; --border-2: 2px;

  /* ---- Effects ------------------------------------------------------- */
  --elevation-md:
    0 12px 28px -4px rgba(10, 9, 11, 0.12),
    0 4px 8px -2px rgba(10, 9, 11, 0.06),
    0 0 0 1px rgba(10, 9, 11, 0.05);
}

/* ==========================================================================
   Dark theme — <html data-theme="dark"> (set by js/layout.js from Settings › Theme;
   "System" follows prefers-color-scheme). Only semantic tokens change.
   Neutrals follow the navy dashboard reference (page #0f1828, surface #172033,
   border #283042, muted text #97a2b6); brand purple stays on buttons and links.
   Contrast (WCAG 2.2 AA), checked against the surfaces they sit on:
   text ≥ 4.5:1 · large text / icons / control borders / focus ring ≥ 3:1.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-default: var(--purple-500);          /* fills: white text 5.2:1 */
  --brand-hover: var(--purple-600);            /* white text 6.7:1 */
  --brand-active: var(--purple-700);
  --brand-subtle: #1c1836;                     /* row hover, secondary button hover */
  --brand-subtle-hover: #241d47;
  --brand-border: #4e3a9a;                     /* focus halo on buttons */
  --brand-text: #b4a8fd;
  --brand-on-brand: var(--white);
  --brand-on-subtle: #b4a8fd;
  --brand-fg: #b4a8fd;                         /* 8.5:1 on surface, 6.9:1 on raised */
  --brand-fill-border: var(--purple-400);      /* ≥ 3:1 on every row background */
  --brand-fg-hover: #cfc8fe;
  --brand-fg-strong: #dad6ff;
  --brand-selected: #b4a8fd;

  --background-page: #0f1828;
  --background-canvas: #0f1828;
  --background-surface: #172033;
  --background-raised: #1e2a40;
  --background-sunken: #1e2a40;
  --background-hover: #1e2a40;
  --background-disabled: #1e2a40;
  --background-selected: #2a3650;
  --background-strong: #3a4660;
  --background-inverse: #e2e8f0;
  --background-thead: #243049;                 /* neutral navy, a step lighter than rows (per user) */
  --background-row-hover: #212b40;              /* lighter navy, not purple (per user) */
  --secondary-hover-bg: var(--background-surface);  /* no fill change on hover (per user) */
  --secondary-hover-border: var(--brand-default);  /* primary button colour */
  --option-selected-bg: var(--background-surface);  /* selected option card: outline only (per user) */
  --background-striped: #1b2539;

  --border-default: #283042;
  --border-strong: #3a4458;
  --border-disabled: #283042;
  --border-control: #717d92;                   /* 3.9:1 on surface, 3.5:1 on raised, 3.2:1 on thead */
  --border-input: #68748a;                     /* softer default for fields (per user): 3.5:1 on surface, 3.05:1 on raised */
  --border-control-hover: #97a2b6;
  --border-subtle: #222b3e;

  --text-heading: #f8fafc;                     /* 17.1:1 */
  --text-primary: #f1f5f9;                     /* 16.3:1 */
  --text-secondary: #c3cad6;                   /* 9.9:1 */
  --text-muted: #97a2b6;                      /* 6.3:1 on surface, 5.6:1 on raised */
  --text-label: #cbd5e1;
  --text-placeholder: #97a2b6;
  --text-pagination: #97a2b6;
  --text-disabled: #5d687c;                    /* disabled — exempt, still distinguishable */
  --text-inverse: #0f1828;                     /* on inverse (tooltip) 14.5:1 */

  --status-success: #10b981;  --status-success-subtle: #062a20; --status-success-text: #6ee7b7;
  --status-warning: #f59e0b;  --status-warning-subtle: #2a1b06; --status-warning-text: #fcd34d;
  --status-danger: #dc2626;   --status-danger-subtle: #2c1014;  --status-danger-text: #ee6e6c;
  --status-danger-hover: #b91c1c;
  --status-info: #3b82f6;     --status-info-subtle: #13233f;    --status-info-text: #65a0fd;
  --danger-fg: #ee6e6c;                        /* 5.5:1 on surface */
  --danger-fg-hover: #fca5a5;
  --required-color: #ee6e6c;

  --focus-ring: var(--purple-400);             /* 5.8:1 on surface */
  --tag-bg: #26324a;                           /* neutral tag: 8.9:1 text */
  --tag-border: #3a4458;
  --tag-text: #e2e8f0;
  --tag-neutral-text: var(--text-muted);       /* 5.0:1 on --tag-bg */
  --skeleton-bg: #1e2a40;
  --skeleton-sheen: #2a3650;
  /* Dark theme: slate-950 would vanish against the page, so the inverse toast
     sits on the raised navy instead and keeps its light text. */
  --toast-inverse-bg: #1e2a40;
  --toast-inverse-border: #3a4458;
  --toast-inverse-divider: #3a4458;
  --toast-inverse-text: #f8fafc;
  --toast-inverse-muted: #97a2b6;
  --icon-sort: #97a2b6;                        /* 5.6:1 on the table header */
  --icon-sort-active: #f1f5f9;
  --icon-color: #97a2b6;

  --switch-off: #717d92;                       /* 3.9:1 on surface */
  --switch-off-hover: #97a2b6;
  --switch-knob: #ffffff;

  --footer-bg: var(--background-surface);     /* same as the header (per user) */
  --footer-link: #beb5fe;                      /* 8.6:1 on #172033 */
  --footer-link-hover: #ffffff;
  --footer-line: var(--border-default);
  --footer-border: var(--border-default);      /* matches the header's bottom border */
  --footer-copy: #b4a8fd;                      /* 7.7:1 on #172033 */

  --backdrop: rgba(9, 14, 25, 0.75);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-popover: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --shadow-header: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  --shadow-bar: 0 -4px 12px -6px rgba(0, 0, 0, 0.6);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.5);
  --elevation-md: 0 12px 28px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}