/* VANTAGE design tokens (docs/06 §1). Single source of truth for colour, type and spacing. Do not hardcode values elsewhere. Consumed by BOTH the authenticated web shell (app.css + components.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: Inter, "Segoe UI", Roboto, system-ui, sans-serif; --font-num: "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 §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 §1, §6) */ --touch: 44px; color-scheme: light; } /* Dark theme — opt-in via 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; color-scheme: dark; }