/* ============================================================
   tokens.css — Crenley Admin Console
   Sourced verbatim from the build guidelines (PilotApp
   Resources/Styles/Colors.xaml, translated to CSS).

   Rule: light is the complete set. Dark redefines VALUES only.
   Nothing in the app overrides these; components read only from here.
   ============================================================ */

:root {
  /* ---- brand ramps — theme independent ---- */
  --navy-950: #0a1f4f;
  --navy-900: #0c275c;
  --navy-800: #102e72;
  --navy-700: #1b4280;
  --navy-800-spec: #0b1f4d; /* print / exported artwork only */

  /* Gold follows the Crenley mark (#e2c48a); 600 stays dark enough for text on white. */
  --gold-600: #8f6b2e;
  --gold-500: #b8914e;
  --gold-400: #d4ae6c;
  --gold-300: #e2c48a;

  /* The navy behind the Crenley mark (logo, icon, splash). */
  --brand-ink: #061323;

  --blue-600: #1546d6;
  --blue-500: #1e5eff;
  --blue-400: #4c82ff;

  /* ---- surfaces & ink (light) ---- */
  --bg: #f5f7fa;
  --bg-subtle: #edf1f7;
  --surface: #ffffff;
  --surface-sunken: #eff3f9;
  --border: #e4e9f2;
  --border-strong: #cbd5e5;
  --divider: #edf1f7;

  --ink: #0b1f4d;
  --ink-2: #5a6b8c;
  --ink-3: #8b99b5;

  /* ---- roles ---- */
  --accent: var(--gold-600);
  --accent-bright: var(--gold-500);
  --link: var(--blue-500);
  --brand-fill: var(--navy-800);
  --brand-fill-hover: var(--navy-700);
  --on-brand: #ffffff;

  /* ---- status: solid + tint, always as a pair ---- */
  --ok: #0e9f6e;
  --ok-tint: #e5f6f0;
  --warn: #b26a05;
  --warn-tint: #fcf2e0;
  --stop: #c7332b;
  --stop-tint: #fcebea;
  --info: #1e5eff;
  --info-tint: #edf2ff;

  /* ---- duty colours — founder-approved, never re-toned ---- */
  --duty-flight: #ef4444;
  --duty-standby: #2f6bff;
  --duty-layover: #f59e0b;
  --duty-off: #22b36a;
  --duty-training: #8b5cf6;
  --duty-positioning: #0fb5ae;
  --duty-none: #9aa6bc;

  /* ---- space scale ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* ---- radii ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  /* Cards use 18px per the app's design language (spec p.11); rows, chips and
     inputs stay tighter so a dense table doesn't read as a stack of cards. */
  --r-md: 18px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- controls ---- */
  --control-sm: 40px;
  --control: 52px;

  /* ---- icons ---- */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;

  /* ---- card padding ---- */
  --pad-card: 16px;
  --pad-card-lg: 20px;

  /* ---- type ---- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: 34px;
  --t-h1: 26px;
  --t-h2: 21px;
  --t-h3: 17px;
  --t-body: 15px;
  --t-body-sm: 13px;
  --t-caption: 11.5px;
  --t-overline: 10.5px;
  --t-data-lg: 19px;
  --t-data: 15px;
  --t-data-sm: 13px;

  /* ---- elevation — restrained; borders do most of the work ---- */
  --shadow-sm: 0 1px 2px rgba(11, 31, 77, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 31, 77, 0.08);
  --shadow-lg: 0 18px 48px rgba(11, 31, 77, 0.12);

  /* ---- focus ---- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--link);

  /* ---- layout ---- */
  --rail: 232px;
  --measure: 69ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070c1a;
    --bg-subtle: #0b1226;
    --surface: #101935;
    --surface-sunken: #0b1226;
    --border: #1f2b4d;
    --border-strong: #2c3a61;
    --divider: #1a2442;

    --ink: #edf1f9;
    --ink-2: #97a5c4;
    --ink-3: #6b7a9c;

    --accent: var(--gold-300);
    --accent-bright: var(--gold-400);
    --link: var(--blue-400);
    --brand-fill: var(--blue-600);
    --brand-fill-hover: var(--blue-500);

    --ok: #34d39e;
    --ok-tint: #0c2b22;
    --warn: #f0b145;
    --warn-tint: #2c2210;
    --stop: #ff6b62;
    --stop-tint: #2e1412;
    --info: #6b95ff;
    --info-tint: #132449;

    --duty-flight: #ff6b6b;
    --duty-standby: #6b95ff;
    --duty-layover: #fbbf4d;
    --duty-off: #3dd489;
    --duty-training: #a98bff;
    --duty-positioning: #2dd4cb;
    --duty-none: #6b7a9c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit choice wins in both directions. */
:root[data-theme="dark"] {
  --bg: #070c1a;
  --bg-subtle: #0b1226;
  --surface: #101935;
  --surface-sunken: #0b1226;
  --border: #1f2b4d;
  --border-strong: #2c3a61;
  --divider: #1a2442;

  --ink: #edf1f9;
  --ink-2: #97a5c4;
  --ink-3: #6b7a9c;

  --accent: var(--gold-300);
  --accent-bright: var(--gold-400);
  --link: var(--blue-400);
  --brand-fill: var(--blue-600);
  --brand-fill-hover: var(--blue-500);

  --ok: #34d39e;
  --ok-tint: #0c2b22;
  --warn: #f0b145;
  --warn-tint: #2c2210;
  --stop: #ff6b62;
  --stop-tint: #2e1412;
  --info: #6b95ff;
  --info-tint: #132449;

  --duty-flight: #ff6b6b;
  --duty-standby: #6b95ff;
  --duty-layover: #fbbf4d;
  --duty-off: #3dd489;
  --duty-training: #a98bff;
  --duty-positioning: #2dd4cb;
  --duty-none: #6b7a9c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
}