/* =============================================================================
   AJM WMS — Design Tokens (shared source of truth)
   -----------------------------------------------------------------------------
   This is the canonical home for the design system's tokens. It is served at
   /static/tokens.css and linked from the SPA <head> (dashboard.html, and — when
   ready — crm/app/dashboard.html and google-ads-cpa/cpa/dashboard.html) so the
   three surfaces share ONE token vocabulary instead of three hand-synced copies.

   Migration status (Priority Actions #1 + #2 from the design system audit):
     - Section 1 mirrors the tokens currently inlined in dashboard.html's :root,
       VALUES VERBATIM. Linked before the inline <style>, so the inline block
       still wins during the transition => zero visual change. Once every
       surface links this file, delete the inline :root block and this section
       becomes authoritative.
     - Sections 2 & 3 are NEW (type + spacing scales). Nothing consumes them
       yet, so adding them is also zero visual change. Adopt them incrementally,
       replacing the ~40 ad-hoc font-size values and the arbitrary px spacing.
     - Section 4 is the canonical semantic color layer for reconciling the two
       palettes (#2). The warm-neutral ramp below is canonical. The cool-slate
       Tailwind hex scattered in inline styles (#64748b, #94a3b8, #e2e8f0, ...)
       is non-canonical drift — migrate it onto these names. (Per agreed scope,
       slate aliases are intentionally NOT added here; that's a later pass.)
   ============================================================================= */

:root{
  /* ---- Section 1: current tokens (verbatim — keep in sync until inline :root is removed) ---- */

  /* Ink ramp — warm-neutral B&W (the "Swiss editorial" language) */
  --primary:#0a0a0a;
  --primary-light:#1a1a1a;
  --primary-dark:#000000;
  --sidebar-bg:#0a0a0a;
  --sidebar-hover:rgba(255,255,255,.04);
  --sidebar-active:#171717;
  --bg:#fbfaf8;
  --bg-secondary:#f0eeea;
  --input-bg:#fff;
  --text-muted:#a3a3a3;
  --card-bg:#ffffff;
  --text:#0a0a0a;
  --text-secondary:#737373;
  --border:#e7e5e1;
  --border-strong:#d4d2cd;
  --soft:#f0eeea;

  /* Signal colors (dot accents — never used as background fills) */
  --success:#166534;
  --warning:#92400e;
  --danger:#b91c1c;
  --info:#1d4ed8;

  /* Radius / shadow / motion */
  --radius:6px;
  --radius-sm:4px;
  --radius-lg:8px;
  --shadow:none;
  --shadow-md:0 8px 24px -12px rgba(10,10,10,.12);
  --transition:background .12s ease, border-color .12s ease, color .12s ease;

  /* ---- Section 2: typographic scale (NEW) ----
     Root font-size is 14px (html{font-size:14px}). rem values chosen to land on
     the sizes the app already uses most, replacing ~40 near-duplicate literals.
       2xs .68rem ~9.5px  | xs .75rem ~10.5px | sm .82rem ~11.5px (most common)
       base .9rem ~12.6px | md 1rem 14px      | lg 1.1rem ~15.4px
       xl 1.4rem ~19.6px  | 2xl 1.75rem ~24.5px                                  */
  --text-2xs:.68rem;
  --text-xs:.75rem;
  --text-sm:.82rem;
  --text-base:.9rem;
  --text-md:1rem;
  --text-lg:1.1rem;
  --text-xl:1.4rem;
  --text-2xl:1.75rem;
  --text-3xl:2.5rem;   /* ~35px — hero headings (the lone Phase-2 hold); above 2xl */

  --leading-tight:1.2;
  --leading-snug:1.35;
  --leading-normal:1.5;

  /* Weights — the audit found only 500 + element defaults in use; keep it to two */
  --font-weight-normal:400;
  --font-weight-medium:500;

  /* ---- Section 3: spacing scale (NEW) ----
     Tuned to the values actually used (px), so existing layouts can adopt it
     without nudging. Base step 2px; the common 6/8/10/12 land on named steps.   */
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:14px;
  --space-8:16px;
  --space-10:20px;
  --space-12:24px;
  --space-16:32px;

  /* ---- Section 4: canonical semantic color layer (NEW, reconciliation) ----
     Forward-looking names that point at the warm-neutral ramp above. New code
     should target THESE, not raw hex. Feature tokens that duplicate concepts
     (--blue / --accent -> --color-accent, --red -> --color-danger,
      --amber -> --color-warning) should be retired onto this layer.            */
  --color-bg:var(--bg);
  --color-bg-subtle:var(--bg-secondary);
  --color-surface:var(--card-bg);
  --color-fg:var(--text);
  --color-fg-muted:var(--text-secondary);
  --color-fg-subtle:var(--text-muted);
  --color-border:var(--border);
  --color-border-strong:var(--border-strong);

  --color-accent:var(--info);     /* canonical action/link blue (replaces --blue/--accent) */
  --color-success:var(--success);
  --color-warning:var(--warning); /* replaces --amber */
  --color-danger:var(--danger);   /* replaces --red */

  /* ---- Section 5: canonical color ramp + signal variants (NEW) ----
     The token vocabulary the Phase-2 hex→token codemod (scripts/ds_cleanup/
     color_map.csv) targets. The cool-slate Tailwind hex scattered across inline
     styles (#64748b, #94a3b8, #e2e8f0, …) maps onto this warm-neutral ramp; the
     ad-hoc signal hex (#dc2626, #16a34a, #f59e0b, #2563eb, …) maps onto the
     fg/bg/solid/strong variants. VALUES ARE THE CANONICAL TARGETS from the map
     (color_map.csv `token_hex`). Nothing references these until the codemod
     runs, so adding them is zero visual change. */

  /* Warm-neutral ramp (the cool-slate drift consolidates onto this) */
  --n-0:#ffffff;
  --n-50:#fbfaf8;
  --n-100:#f0eeea;
  --n-200:#e7e5e1;
  --n-300:#d4d2cd;
  --n-400:#a3a3a3;
  --n-500:#737373;
  --n-600:#57534e;
  --n-700:#292524;
  --n-900:#0a0a0a;

  /* Danger / success / warning / info — bg (tint) / fg (text) / solid / strong */
  --danger-bg:#fee2e2;
  --danger-fg:#b91c1c;
  --danger-solid:#dc2626;
  --danger-strong:#991b1b;

  --success-bg:#dcfce7;
  --success-fg:#166534;
  --success-solid:#16a34a;
  --success-strong:#14532d;

  --warning-bg:#fef3c7;
  --warning-fg:#92400e;
  --warning-solid:#f59e0b;
  --warning-strong:#854f0b;

  /* Orange — a brighter, higher-visibility signal than the amber --warning
     ramp, for states that must stand out (e.g. freight cost mismatches). */
  --orange-bg:#ffedd5;
  --orange-fg:#c2410c;
  --orange-solid:#f97316;
  --orange-strong:#9a3412;

  --info-bg:#e6f1fb;
  --info-fg:#1d4ed8;
  --info-solid:#2563eb;
  --info-strong:#1e40af;
}
