/* VANTAGE design tokens (docs/06 sec. 1). Single source of truth for colour,
   type and spacing. Do not hardcode values elsewhere.

   Consumed by BOTH the authenticated web shell (app.css) and
   the field PWA (field.css) - the field service worker precaches this file, so
   keep additions lean and semantic. Extended for the enterprise UI system;
   every original token below is preserved (the field app depends on them). */

:root {
    /* Colour - campaign green + gold identity */
    --ink: #0B1F17;
    --green: #0F7A4A;
    --green-deep: #0B5B37;
    --green-mid: #2E8F5F;
    --green-bright: #14A05E;
    --tint: #F3F8F5;
    --soft: #E4F1E9;
    --warm: #FAF3E2;
    --gold: #C89B3C;
    --gold-deep: #9C7318;
    --gold-soft: #F6ECD4;
    --red: #B0492E;
    --red-soft: #F8E9E3;
    --amber: #C7871F;
    --amber-soft: #FBF0DA;
    --text: #18261F;
    --text-2: #3E4C44;
    --muted: #63726A;
    --line: #D9E4DD;

    /* Neutral surface ramp (enterprise depth: page < raised < card < float) */
    --surface: #FFFFFF;
    --surface-2: #F7FBF9;
    --surface-3: #EFF5F2;
    --surface-inset: #F1F6F3;
    --line-2: #E7EFEA;
    --line-strong: #C4D3CB;

    /* Status semantics: green=healthy, amber=attention, red=critical,
       gold=highlight/priority */
    --ok: #0F7A4A;
    --warn: #C7871F;
    --crit: #B0492E;
    --info: #2563A8;
    --info-soft: #E5EFF9;

    /* Sidebar (dark) surface ramp */
    --side-bg: #0B1F17;
    --side-bg-2: #10281D;
    --side-line: rgba(255, 255, 255, .08);
    --side-text: #C9DBD1;
    --side-text-dim: #8CA79A;

    /* Shape & elevation */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(11, 31, 23, .06);
    --shadow: 0 2px 8px rgba(11, 31, 23, .08);
    --shadow-md: 0 6px 18px rgba(11, 31, 23, .10);
    --shadow-lg: 0 18px 48px rgba(11, 31, 23, .18);

    /* Type scale: 12/14/16(base)/20/24/32/40 */
    --font-ui: "InterVariable", Inter, "Segoe UI", Roboto, system-ui, sans-serif;
    /* Numeric/tabular: Inter's tabular figures (via font-feature-settings on
       .text-num / tabular contexts) read cleaner + more premium than a mono
       stack for dashboard numbers; the mono stack stays as the fallback face. */
    --font-num: "InterVariable", Inter, "SF Mono", "Segoe UI Mono", ui-monospace, Menlo, Consolas, monospace;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;
    --fs-4xl: 52px;
    --lh: 1.45;
    --lh-tight: 1.2;
    --tracking: .01em;
    --tracking-wide: .08em;

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

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* Layout metrics */
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 60px;
    --content-max: 1440px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* Focus ring - one accessible ring used everywhere (WCAG, docs/06 sec. 6) */
    --focus: 0 0 0 3px rgba(46, 143, 95, .40);

    /* Z-index scale */
    --z-drawer: 40;
    --z-overlay: 45;
    --z-topbar: 30;
    --z-menu: 60;

    /* Touch targets >= 44px (docs/06 sec. 1, sec. 6) */
    --touch: 44px;

    /* Scrollbars - slim, themed, unobtrusive (replaces the chunky OS default) */
    --scroll-thumb: #C4D3CB;
    --scroll-thumb-hover: #A7BBB0;
    --scroll-track: transparent;

    color-scheme: light;
}

/* Dark theme - opt-in via <html data-theme="dark"> or the OS preference.
   Only the authenticated web shell reacts; the field PWA keeps its light shell
   (offline legibility in daylight). Semantic tokens are remapped; the brand
   greens/golds stay recognisable, surfaces invert. */
:root[data-theme="dark"] {
    --surface: #12211B;
    --surface-2: #16271F;
    --surface-3: #1B2E25;
    --surface-inset: #0E1D16;
    --tint: #0C1712;
    --soft: #17342A;
    --line: #26382F;
    --line-2: #203029;
    --line-strong: #33473D;
    --text: #E6F0EA;
    --text-2: #B7C8BF;
    --muted: #83988D;
    --ink: #E6F0EA;
    --green: #1FA362;
    --green-deep: #37C07E;
    --green-mid: #2E8F5F;
    --gold: #D9AE52;
    --gold-deep: #E6C271;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, .6);
    --red-soft: #3A211A;
    --amber-soft: #33280F;
    --info-soft: #14263A;
    --gold-soft: #2C2413;
    --scroll-thumb: #33473D;
    --scroll-thumb-hover: #46614F;
    --scroll-track: transparent;
    color-scheme: dark;
}

/* ---- ibjx shared tokens (Epic A). ADDITIVE ONLY -- every name above is
   preserved (the field PWA precaches this file and depends on them). These
   mirror the :root values in app.css so a page that loads only tokens.css
   (deck, field) resolves the same names. Names tokens.css already owns
   (--surface, --surface-2, --text, --info, --radius*, --shadow*, --sidebar-w*,
   --topbar-h) are NOT redefined here. */
:root {
    --primary: #1e3a5f;
    --primary-dk: #152d4a;
    --primary-lt: #2563eb;
    --accent: #0e9f6e;
    --party: #1e88e5;
    --party-deep: #1565c0;
    --party-lt: #90caf9;
    --party-soft: #e3f2fd;
    --success: #059669;
    --success-bg: #f0fdf4;
    --success-text: #047857;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-text: #b45309;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-text: #b91c1c;
    --info-bg: #eff6ff;
    --info-text: #1e40af;
    --bg: #f0f4f8;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text-muted: #596980;
    --text-faint: #64748b; /* 4.76:1 on white: placeholders/decorative glyphs only; real text uses --text-muted */
    --slate-100: #f1f5f9;
    --slate-600: #475569;
    --fs-md: 15px;
    --font: "InterVariable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --transition: .18s cubic-bezier(.4, 0, .2, 1);
}