/* =============================================================================
   AtlasONE design tokens — THE single source of truth for the whole product.
   Extends the Atlas Mobility brand. Three layers:
     1. PRIMITIVES  — raw brand hex (reference only via roles below)
     2. SEMANTIC ROLES — what components actually use (--surface/--text/--interactive/…)
     3. LEGACY-TOOL CONTRACT — a stable alias API consumed by pages/tools/*
        (see that block's own header comment). The chrome (app.css/dashboard.css/
        nav.css/landing.css) is fully migrated onto the roles and doesn't use it.
   (See notes/2026-06-24_design_optimization_*.)
   ========================================================================== */
:root {
  /* ── PRIMITIVES (brand palette — reference only via roles) ─────────────── */
  --atlas-indigo:     #0046C8;
  --atlas-indigo-700: #003AA6;   /* hover / pressed */
  --atlas-indigo-800: #0B2A7A;   /* deep gradient stop — auth-aside hero + legacy-tool dark grounds (--navy-2) */
  --atlas-indigo-50:  #EAF0FC;   /* tint surface / selected */
  --atlas-aqua:       #00AAED;   /* graphic / fill / focus only — fails AA as text on white */
  --atlas-charcoal:   #0A1628;
  --atlas-honey:      #F5A623;   /* fill / chart only — fails AA as text on white */
  --atlas-turquoise:  #4ECDC4;   /* fill / chart only */
  --atlas-vermillion: #C93545;
  --atlas-violet:     #6B3FA0;

  /* Neutral ramp */
  --gray-25:  #FCFCFD;  --gray-50:  #F9FAFB;  --gray-100: #F2F4F7;
  --gray-200: #E5E7EB;  --gray-300: #D0D5DD;  --gray-400: #98A2B3;
  --gray-500: #667085;  --gray-600: #475467;  --gray-700: #344054;
  --gray-900: #101828;

  /* ── SPACING (4px base) ────────────────────────────────────────────────── */
  --space-1: 2px;   --space-2: 4px;   --space-3: 6px;   --space-4: 8px;
  --space-5: 12px;  --space-6: 16px;  --space-7: 20px;  --space-8: 24px;
  --space-9: 32px;  --space-10: 40px; --space-11: 48px; --space-12: 64px;
  --space-13: 80px; --space-14: 96px;

  /* ── TYPE ──────────────────────────────────────────────────────────────── */
  --font-sans: "Avenir Next", "Avenir", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900;

  --fs-display: 44px; --lh-display: 1.1;
  --fs-h1: 32px;      --lh-h1: 1.2;
  --fs-h2: 24px;      --lh-h2: 1.25;
  --fs-h3: 20px;      --lh-h3: 1.3;
  --fs-h4: 16px;      --lh-h4: 1.4;
  --fs-body: 16px;    --lh-body: 1.5;
  --fs-body-sm: 14px; --lh-body-sm: 1.5;
  --fs-caption: 12px; --lh-caption: 1.4;
  --fs-overline: 11px;

  /* ── RADIUS ────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;     /* default: buttons, inputs, small cards */
  --radius-lg: 12px;    /* panels, cards, modals */
  --radius-xl: 16px;    /* hero / large surfaces */
  --radius-pill: 9999px;

  /* ── ELEVATION (3 levels, dark-tinted low-alpha) ───────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(10,22,40,.06), 0 1px 3px 0 rgba(10,22,40,.10);
  --shadow-md: 0 4px 6px -2px rgba(10,22,40,.08), 0 12px 16px -4px rgba(10,22,40,.10);
  --shadow-lg: 0 8px 8px -4px rgba(10,22,40,.10), 0 20px 24px -4px rgba(10,22,40,.14);

  /* ── SEMANTIC ROLES (what components should use) ───────────────────────── */
  /* surfaces */
  --surface:          #FFFFFF;
  --surface-subdued:  var(--gray-50);     /* app background #F9FAFB */
  --surface-sunken:   var(--gray-100);    /* wells, table headers, toggles */
  --surface-selected: var(--atlas-indigo-50);
  --surface-inverse:  var(--atlas-charcoal);
  /* text */
  --text:           var(--gray-700);      /* #344054 brand body text */
  --text-strong:    var(--gray-900);      /* headings */
  --text-subdued:   var(--gray-500);      /* captions / meta */
  --text-on-brand:  #FFFFFF;
  --text-on-inverse:#E4E7EC;
  /* borders */
  --border:         var(--gray-200);      /* #E5E7EB */
  --border-strong:  var(--gray-300);
  --border-subtle:  var(--gray-100);
  /* interactive / brand */
  --interactive:         var(--atlas-indigo);
  --interactive-hover:   var(--atlas-indigo-700);
  --interactive-subdued: var(--atlas-indigo-50);
  --focus-ring:          var(--atlas-aqua);
  /* status — RESERVED for data meaning, paired with icon/label, never decoration */
  --critical: var(--atlas-vermillion); --critical-bg: #FBE9EB;
  --success:  #1A8F5A;                  --success-bg:  #E6F4EC;  /* turquoise too low-contrast as text */
  --warning:  #B7791F;                  --warning-bg:  #FDF3E2;  /* darkened honey = AA text */
  --info:     var(--atlas-indigo);      --info-bg:     var(--atlas-indigo-50);
  --violet-bg: #F2EBF9;  /* .badge.lock / .badge.soon tint */
  --honey-bg:  #FDF6E9;  /* .badge.preview / .preview-banner tint */

  /* =========================================================================
     LEGACY-TOOL CONTRACT — NOT deprecated, NOT scheduled for deletion.
     The chrome (app.css/dashboard.css/nav.css/landing.css) is fully migrated
     onto the semantic roles above and references NONE of these names anymore
     (Task 13). What's left is a real, load-bearing API: the older tool pages
     under pages/tools/ (brand.css files + inline <style> blocks) and
     atlas-legacy-shim.css's repaint layer reference these names directly and
     are out of this repo's chrome-ownership boundary (each tool owner edits
     only their own folder — see docs/TEAM_GUIDE.md). Treat this block as a
     stable public API for those files: don't rename or remove an entry here
     without first re-running the consumer grep below and confirming zero
     hits, tool folders included.
       grep -rln 'var(--NAME)' public/css src/services pages/tools pages/login.html \
         pages/register.html --include='*.css' --include='*.html' --include='*.js'
     (Names below with genuinely zero consumers anywhere — including tools —
     were deleted in Task 13: --brand, --brand-700, --brand-50, --navy,
     --ink-soft, --card, --lock, --radius, --shadow, --space, --maxw, --font,
     --disp, --mono.)
     ====================================================================== */
  --cyan:      var(--atlas-aqua);           /* was #00c8ff → now Atlas aqua */
  --purple:    var(--atlas-violet);
  --navy-2:    var(--atlas-indigo-800);     /* master-class, legislation-map */
  --ink:       var(--text);                 /* equipment-fleet */
  --muted:     var(--text-subdued);         /* equipment-fleet */
  --line:      var(--border);
  --bg:        var(--surface-subdued);      /* was #f7f8fc → now #F9FAFB */
  --ok:        var(--success);
  --warn:      var(--warning);
  --amber:     var(--atlas-honey);
}