/* ==========================================================================
   FieldGrid UI v2 — Design Tokens
   The only file where raw values live. Everything else references these.
   ========================================================================== */

:root {

  /* ---- Typography ------------------------------------------------------ */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
              'Liberation Mono', monospace;

  --fs-2xs: 0.6875rem;  /* 11px — micro labels, table sub-text */
  --fs-xs:  0.75rem;    /* 12px — meta, captions, badges       */
  --fs-sm:  0.8125rem;  /* 13px — dense UI, table cells        */
  --fs-md:  0.875rem;   /* 14px — body default                 */
  --fs-lg:  1rem;       /* 16px — emphasised body, card titles */
  --fs-xl:  1.25rem;    /* 20px — section headings             */
  --fs-2xl: 1.5rem;     /* 24px — page titles                  */
  --fs-3xl: 1.875rem;   /* 30px — stat figures                 */
  --fs-4xl: 2.375rem;   /* 38px — hero figures                 */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.55;

  --tracking-tight: -0.011em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.06em;

  /* ---- Color: neutrals ------------------------------------------------- */
  --canvas:      #fbfbfa;   /* app background — warm off-white  */
  --surface:     #ffffff;   /* cards, panels, tables            */
  --surface-sunk:#f6f6f4;   /* wells, table headers, inset rows */
  --surface-hover:#f4f4f2;
  --surface-active:#eeeeeb;

  --ink:         #18181b;   /* primary text                     */
  --ink-soft:    #52525b;   /* secondary text                   */
  --ink-muted:   #8b8b93;   /* tertiary / meta                  */
  --ink-faint:   #b4b4bb;   /* placeholders, disabled           */

  --line:        #e8e8e6;   /* hairline borders — the workhorse */
  --line-strong: #d6d6d2;   /* emphasised dividers, inputs      */

  /* ---- Color: accent --------------------------------------------------- */
  --accent:        #6d28d9;
  --accent-hover:  #5b21b6;
  --accent-active: #4c1d95;
  --accent-subtle: #f5f1fe;
  --accent-border: #ddd0fa;
  --accent-text:   #5b21b6;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(109, 40, 217, 0.18);

  /* ---- Color: semantic ------------------------------------------------- */
  --success:        #15803d;
  --success-subtle: #edfaf1;
  --success-border: #c3ebd2;

  --warning:        #b45309;
  --warning-subtle: #fdf5e7;
  --warning-border: #f2ddb4;

  --danger:         #b91c1c;
  --danger-hover:   #991b1b;
  --danger-subtle:  #fdf0ef;
  --danger-border:  #f4cdc9;
  --danger-ring:    rgba(185, 28, 28, 0.18);

  --info:           #1d4ed8;
  --info-subtle:    #eff3fe;
  --info-border:    #ccd9f8;

  --neutral-subtle: #f2f2f0;
  --neutral-border: #e0e0dc;

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-full: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  /* Structure comes from hairlines. Shadows are reserved for things that
     genuinely float above the page. Resting cards get no shadow. */
  --shadow-pop:
    0 1px 2px rgba(24, 24, 27, 0.06),
    0 8px 24px -6px rgba(24, 24, 27, 0.14);
  --shadow-overlay:
    0 2px 8px rgba(24, 24, 27, 0.08),
    0 24px 56px -12px rgba(24, 24, 27, 0.24);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-mid:  180ms;
  --t-slow: 240ms;

  /* ---- Layout ---------------------------------------------------------- */
  --topbar-h:    56px;
  --nav-w:      248px;
  --nav-w-rail:  60px;
  --content-max:1440px;
  --gutter:     var(--s-6);

  /* ---- Z-index scale --------------------------------------------------- */
  --z-nav:      40;
  --z-topbar:   50;
  --z-menu:     60;
  --z-scrim:    70;
  --z-drawer:   80;
  --z-modal:    90;
  --z-toast:   100;
}

/* ==========================================================================
   Dark mode — neutral token overrides
   ========================================================================== */
[data-mode="dark"] {
  --canvas:        #0a0c0f;
  --surface:       #111418;
  --surface-sunk:  #0d1014;
  --surface-hover: #181c22;
  --surface-active:#1e232b;

  --ink:           #e8edf2;
  --ink-soft:      #9aa5b1;
  --ink-muted:     #5f6b78;
  --ink-faint:     #3d4852;

  --line:          #232a33;
  --line-strong:   #313a45;

  --success:        #22c55e;
  --success-subtle: rgba(34,197,94,.14);
  --success-border: rgba(34,197,94,.30);

  --warning:        #f59e0b;
  --warning-subtle: rgba(245,158,11,.14);
  --warning-border: rgba(245,158,11,.30);

  --danger:         #ef4444;
  --danger-hover:   #f87171;
  --danger-subtle:  rgba(239,68,68,.14);
  --danger-border:  rgba(239,68,68,.30);
  --danger-ring:    rgba(239,68,68,.22);

  --info:           #60a5fa;
  --info-subtle:    rgba(96,165,250,.14);
  --info-border:    rgba(96,165,250,.30);

  --neutral-subtle: rgba(255,255,255,.06);
  --neutral-border: rgba(255,255,255,.12);

  /* Dark default accent (purple) */
  --accent:        #a78bfa;
  --accent-hover:  #c4b5fd;
  --accent-active: #7c3aed;
  --accent-subtle: rgba(167,139,250,.14);
  --accent-border: rgba(167,139,250,.30);
  --accent-text:   #c4b5fd;
  --on-accent:     #1e0a4e;
  --accent-ring:   rgba(167,139,250,.22);
}

/* ==========================================================================
   Themes — color accent tokens per theme × mode
   ========================================================================== */

/* ── Glacier (sky blue) ── */
[data-theme="glacier"] {
  --accent:        #0284c7;
  --accent-hover:  #0369a1;
  --accent-active: #075985;
  --accent-subtle: #e0f2fe;
  --accent-border: #7dd3fc;
  --accent-text:   #0369a1;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(2,132,199,.18);
}
[data-theme="glacier"][data-mode="dark"] {
  --accent:        #0ea5e9;
  --accent-hover:  #38bdf8;
  --accent-active: #0284c7;
  --accent-subtle: rgba(14,165,233,.14);
  --accent-border: rgba(14,165,233,.30);
  --accent-text:   #7dd3fc;
  --on-accent:     #04283a;
  --accent-ring:   rgba(14,165,233,.22);
}

/* ── Royal (cobalt blue) ── */
[data-theme="royal"] {
  --accent:        #2347ff;
  --accent-hover:  #1a37d6;
  --accent-active: #142bab;
  --accent-subtle: #e4eaff;
  --accent-border: #aebeff;
  --accent-text:   #1d3ae0;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(35,71,255,.18);
}
[data-theme="royal"][data-mode="dark"] {
  --accent:        #5b7fff;
  --accent-hover:  #7d9bff;
  --accent-active: #3f5fe0;
  --accent-subtle: rgba(91,127,255,.16);
  --accent-border: rgba(91,127,255,.32);
  --accent-text:   #a9bcff;
  --on-accent:     #0a132e;
  --accent-ring:   rgba(91,127,255,.22);
}

/* ── Navy (dark navy + gold) ── */
[data-theme="navy"] {
  --canvas:        #f2efe6;
  --surface:       #fffdf8;
  --surface-sunk:  #f6f2e8;
  --surface-hover: #f0ead8;
  --surface-active:#ece5d4;
  --line:          #e4d9c0;
  --line-strong:   #cfc4a0;
  --accent:        #1e2a4a;
  --accent-hover:  #16203a;
  --accent-active: #0f1830;
  --accent-subtle: #f3eedd;
  --accent-border: #d9c79a;
  --accent-text:   #8a6d24;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(30,42,74,.18);
}
[data-theme="navy"][data-mode="dark"] {
  --canvas:        #0d1424;
  --surface:       #141d33;
  --surface-sunk:  #0f1828;
  --surface-hover: #1a2640;
  --surface-active:#22304f;
  --line:          #26314d;
  --line-strong:   #33405f;
  --accent:        #d9b85e;
  --accent-hover:  #e6cf86;
  --accent-active: #bf9e44;
  --accent-subtle: rgba(217,184,94,.14);
  --accent-border: rgba(217,184,94,.30);
  --accent-text:   #e6cf86;
  --on-accent:     #2a2103;
  --accent-ring:   rgba(217,184,94,.22);
}

/* ── Emerald ── */
[data-theme="emerald"] {
  --canvas:        #eef4f1;
  --accent:        #0f7a52;
  --accent-hover:  #0c6244;
  --accent-active: #094e36;
  --accent-subtle: #d7f0e4;
  --accent-border: #7fd1ab;
  --accent-text:   #0a6b48;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(15,122,82,.18);
}
[data-theme="emerald"][data-mode="dark"] {
  --canvas:        #0a0f0d;
  --accent:        #34d399;
  --accent-hover:  #5ee0ab;
  --accent-active: #10a673;
  --accent-subtle: rgba(52,211,153,.14);
  --accent-border: rgba(52,211,153,.30);
  --accent-text:   #6ee7b7;
  --on-accent:     #04341f;
  --accent-ring:   rgba(52,211,153,.22);
}

/* ── Slate (amber/orange) ── */
[data-theme="slate"] {
  --canvas:        #f1f3f5;
  --accent:        #b45309;
  --accent-hover:  #92400e;
  --accent-active: #78350f;
  --accent-subtle: #fef3c7;
  --accent-border: #fcd34d;
  --accent-text:   #b45309;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(180,83,9,.18);
}
[data-theme="slate"][data-mode="dark"] {
  --canvas:        #0f1216;
  --surface:       #171b21;
  --surface-sunk:  #141820;
  --surface-hover: #1d222a;
  --surface-active:#252b35;
  --accent:        #fbbf24;
  --accent-hover:  #fcd34d;
  --accent-active: #d99e0b;
  --accent-subtle: rgba(251,191,36,.14);
  --accent-border: rgba(251,191,36,.30);
  --accent-text:   #fcd34d;
  --on-accent:     #3a2606;
  --accent-ring:   rgba(251,191,36,.22);
}

/* ── Indigo ── */
[data-theme="indigo"] {
  --canvas:        #f1f1fa;
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-active: #3730a3;
  --accent-subtle: #e8e7fb;
  --accent-border: #c7c5f5;
  --accent-text:   #4338ca;
  --on-accent:     #ffffff;
  --accent-ring:   rgba(79,70,229,.18);
}
[data-theme="indigo"][data-mode="dark"] {
  --canvas:        #0b0a14;
  --accent:        #818cf8;
  --accent-hover:  #a5b4fc;
  --accent-active: #6366f1;
  --accent-subtle: rgba(129,140,248,.16);
  --accent-border: rgba(129,140,248,.32);
  --accent-text:   #a5b4fc;
  --on-accent:     #1e1b4b;
  --accent-ring:   rgba(129,140,248,.22);
}

/* ==========================================================================
   Density: applied to <html> to tighten the whole UI one notch. Reserved for
   the grid-heavy pages (dispatch, route planner) migrated later.
   ========================================================================== */
[data-density="compact"] {
  --fs-md: var(--fs-sm);
  --s-4: 0.875rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-mid:  0ms;
    --t-slow: 0ms;
  }
}