/* EVO TrustGuard — design tokens (single source of truth)
 *
 * Owner:        /css/AGENTS.md
 * Cascade:      first stylesheet on every page (tokens before everything else)
 * Edit policy:  add new tokens here; never define design primitives anywhere
 *               else. Page-specific CSS consumes tokens via var(--name).
 *
 * What lives here:
 *   - CSS custom properties only — no rules, no selectors except :root.
 *   - Light-mode defaults under :root + :root[data-theme="light"].
 *   - Dark-mode swaps under :root[data-theme="dark"].
 *   - Marketing-only tokens namespaced --marketing-* and --display-* so the
 *     portal palette and the marketing palette can coexist without collision.
 *
 * Token-normalization status (C56 audit):
 *   The audit cataloged 129 hex / 73 rgba / 117 spacing / 24 font-size
 *   distinct values across 13,678 inline-CSS lines. The token system here
 *   names every canonical role; an opt-in literal-to-token find-and-replace
 *   pass across page-specific CSS is a follow-up sprint, NOT done here, per
 *   the audit's "phase token-normalization separately to bound risk"
 *   recommendation (Section 10.A).
 *
 * Locked-decision references:
 *   LOCKED C37 — Dark Mode Toggle (data-theme attribute, no prefers-color-scheme)
 *   LOCKED C38 — header dark surface, theme-adaptive logo
 *   LOCKED C53 — three-state status vocabulary (Active / Pending / Inactive)
 *
 * Compatibility note:
 *   Legacy tokens declared in /css/shared.css and /shared-themes.css remain
 *   in place during this extraction. Tokens declared here are a SUPERSET —
 *   adding new tokens does not break code that references the legacy names.
 */

:root,
:root[data-theme="light"] {
  /* ── Brand reds ─────────────────────────────────────────────────────── */
  --red:                #B31217;     /* canonical brand red — 73× across 13 files */
  --red-hover:          #960f13;     /* auth-page hover variant — 9× */
  --red-dark:           #8a0d11;     /* marketing-tier shadow — 3× marketing pages */
  --red-wash:           #f9e8e8;     /* tinted bg for red-lit panels (= --red-light) */
  --red-faint:          #fde8e8;     /* lighter wash for badges */

  /* ── Status colors (LOCKED C53 — Active / Pending / Inactive) ───────── */
  --status-active:           #16a34a;     /* canonical Active green */
  --status-active-hover:     #15803d;     /* hover / pressed */
  --status-active-disabled:  #4ade80;     /* lighter shade — disabled state */
  --status-active-wash:      #dcfce7;     /* tinted bg behind active text */

  --status-pending:          #3b82f6;     /* canonical Pending blue */
  --status-pending-hover:    #1e40af;     /* hover / pressed */
  --status-pending-wash:     #dbeafe;     /* tinted bg behind pending text */

  --status-inactive:         #737373;     /* canonical Inactive gray */
  --status-inactive-wash:    #e5e5e5;     /* tinted bg behind inactive text */

  /* Danger / destructive — separate from status-inactive to preserve
   * Tailwind danger-red conventions used in the codebase. */
  --danger:             #ef4444;
  --danger-hover:       #dc2626;
  --danger-strong:      #b91c1c;
  --danger-dark:        #7f1d1d;
  --danger-wash:        #fee2e2;

  /* ── Surfaces / text / borders ──────────────────────────────────────── */
  --bg:                 #1a1a1a;     /* legacy body bg constant — kept for cascade compatibility */
  --surface:            #ffffff;     /* primary card surface (light) */
  --surface-card:       #ffffff;     /* alias for clarity in component CSS */
  --surface-light:      #fafafa;     /* alternate light surface */
  --surface-elevated:   #fafafa;     /* lifted tile / chip background */

  --text:               #1a1a1a;     /* primary text */
  --text-muted:         #666666;     /* secondary text — collapses #555 / #666 / #888 */
  --text-faint:         #888888;     /* tertiary / metadata */
  --text-disabled:      #bbbbbb;     /* disabled / placeholder */
  --text-dim:           #999999;     /* legacy — alias of text-faint */

  --border:             #e8e8e8;     /* canonical border */
  --border-light:       #f0f0f0;     /* dividers / muted borders */
  --border-strong:      #d0d0d0;     /* hover borders / selected ring */

  /* Brand neutrals (constants — pinned in BOTH themes) */
  --white:              #ffffff;     /* "brand white" — text on red, avatar fg, push-banner copy */
  --black:              #000000;
  --dark:               #1a1a1a;     /* legacy alias — primary text */

  /* Legacy aliases retained for inline-style compatibility */
  --mid:                #444444;
  --light:              #666666;
  --red-light:          #f9e8e8;
  --green:              #16a34a;
  --amber:              #ca8a04;
  --purple:             #7c3aed;
  --red-dim:            #f9e8e8;

  /* ── Marketing palette (namespaced) ─────────────────────────────────── */
  --marketing-red:           #cc1518;
  --marketing-red-dark:      #8a0d11;
  --marketing-red-wash:      #fdf2f2;
  --marketing-bg-dark:       #0f0f0f;
  --marketing-bg-darker:     #111111;
  --marketing-surface:       #1c1c1c;
  --marketing-surface-2:     #242424;
  --marketing-border:        #2a2a2a;

  /* C69 Sprint 2 — sales page marketing decoratives promoted from staged
     literals per LOCKED C68 sales page sequence + LOCKED C57 §4
     single-source-of-truth for tokens. */
  --marketing-bg:            #171414;     /* featured pricing tinted near-black */
  --marketing-bg-alt:        #181818;     /* hero-mock card / mock-flow surface */
  --marketing-surface-1:     #1f1f1f;     /* lm-phone screen gradient stop */
  --marketing-surface-3:     #252525;     /* mock card border */
  --marketing-surface-4:     #262626;     /* price-list header divider */

  /* Two-tone deepest/elevated alternation — sales/about/contact pages.
     Pairs with --bg (#1a1a1a, deepest) to drive the LOCKED C69-H section
     sequence: deepest (hero / lead-mgmt / workflow / marketplace /
     final-cta / footer) ↔ elevated (trust strip / problem / discoverability
     / features / pricing). One notch above --bg with clear separation but
     no visually distinct third tone; sits inside the existing
     #181818–#262626 marketing band. */
  --marketing-section-elevated: #242424;

  /* Brand red accent shifted for AA legibility on dark marketing surfaces.
     `--red` (#B31217) only hits ~3.8:1 on #1a1a1a / ~3.5:1 on #242424 —
     below WCAG AA (4.5:1) for small text. This is the same legibility
     shift the portal already applies under data-theme="dark" (tokens.css
     line ~227); marketing pages have no theme attribute set, so we name
     the dark-friendly red separately and reference it from small red
     text + small red glyphs (eyebrows, ✓/✕ checks, icon-tile glyphs).
     Background uses (`.btn-primary`, `.nav-cta`, decorative blobs) and
     large display numerals stay on `--red` — the brand hue is preserved
     where contrast doesn't apply. */
  --marketing-red-accent:    #e5342e;

  /* ── Shadows (collapsed from 7 rgba(0,0,0,0.0X) shades) ─────────────── */
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-xl:          0 12px 32px rgba(0, 0, 0, 0.18);

  /* ── Typography scale ───────────────────────────────────────────────── */
  --font-sans:          'DM Sans', sans-serif;
  --font-serif:         'DM Serif Display', serif;
  --font-display:       'Bebas Neue', sans-serif;       /* marketing only */
  --font-mono:          'Courier New', monospace;
  --font-mono-stack:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* px scale matches the audit-cataloged values. Portal scale is xs–3xl;
   * marketing pages use display-* for hero sizing. */
  --text-xxs:           10px;
  --text-xs:            11px;
  --text-sm:            12px;
  --text-md:            13px;     /* portal body default */
  --text-base:          14px;
  --text-lg:            15px;
  --text-input:         16px;     /* iOS zoom-prevention threshold for inputs */
  --text-xl:            18px;
  --text-2xl:           20px;
  --text-3xl:           22px;
  --text-display-sm:    28px;
  --text-display-md:    34px;
  --text-display-lg:    60px;
  --text-display-xl:    72px;
  --text-display-2xl:   140px;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-black:       800;     /* marketing only */

  /* Line-height scale (collapsed from 17 distinct values) */
  --leading-tight:      1.2;
  --leading-snug:       1.3;
  --leading-normal:     1.4;
  --leading-relaxed:    1.5;
  --leading-loose:      1.6;

  /* Letter-spacing (collapsed from 13) */
  --tracking-tighter:   -0.5px;
  --tracking-tight:     -0.3px;
  --tracking-normal:    0;
  --tracking-wide:      0.3px;
  --tracking-wider:     0.5px;
  --tracking-loose:     1px;
  --tracking-display:   3px;     /* marketing all-caps headers */

  /* ── Spacing (2-px ladder per audit Section 3) ──────────────────────── */
  --space-0:            0;
  --space-px:           1px;
  --space-0-5:          2px;
  --space-1:            4px;
  --space-1-5:          6px;
  --space-2:            8px;
  --space-2-5:          10px;
  --space-3:            12px;
  --space-3-5:          14px;
  --space-4:            16px;
  --space-4-5:          18px;
  --space-5:            20px;
  --space-5-5:          22px;
  --space-6:            24px;
  --space-7:            28px;
  --space-8:            32px;
  --space-10:           40px;
  --space-12:           48px;
  --space-14:           56px;
  --space-16:           64px;
  --space-18:           72px;
  --space-20:           80px;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-pill:        9999px;

  /* ── Z-index ────────────────────────────────────────────────────────── */
  --z-base:             1;
  --z-sticky:           10;
  --z-nav:              100;
  --z-modal:            1000;
  --z-toast:            2000;
}

/* ── Dark theme overrides ─────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --bg:                 #0a0a0a;
  --surface:            #141414;
  --surface-card:       #141414;
  --surface-light:      #1c1c1c;
  --surface-elevated:   #1c1c1c;

  --text:               #f5f5f5;
  --text-muted:         #9a9a9a;
  --text-faint:         #6a6a6a;
  --text-disabled:      #6a6a6a;
  --text-dim:           #6a6a6a;

  --border:             #2a2a2a;
  --border-light:       #232323;
  --border-strong:      #3a3a3a;

  /* Brand red shifted for dark-mode legibility (LOCKED C37) */
  --red:                #e5342e;
  --red-hover:          #c72a25;
  --red-dark:           #8a0d11;
  --red-wash:           rgba(229, 52, 46, 0.12);
  --red-faint:          rgba(229, 52, 46, 0.18);
  --red-light:          rgba(229, 52, 46, 0.12);
  --red-dim:            rgba(229, 52, 46, 0.12);

  --status-active:          #22c55e;
  --status-active-hover:    #16a34a;
  --status-active-disabled: #4ade80;
  --status-active-wash:     rgba(34, 197, 94, 0.16);

  --status-pending:         #60a5fa;
  --status-pending-hover:   #3b82f6;
  --status-pending-wash:    rgba(59, 130, 246, 0.16);

  --status-inactive:        #a3a3a3;
  --status-inactive-wash:   rgba(115, 115, 115, 0.2);

  --danger:                 #f87171;
  --danger-hover:           #ef4444;
  --danger-strong:          #dc2626;
  --danger-dark:            #b91c1c;
  --danger-wash:            rgba(239, 68, 68, 0.18);

  --green:              #22c55e;
  --amber:              #f59e0b;
  --purple:             #8b5cf6;

  /* Brand white pinned (DO NOT swap — see /shared-themes.css header note) */
  --white:              #ffffff;

  /* Legacy aliases under dark theme */
  --dark:               #f5f5f5;
  --mid:                #cccccc;
  --light:              #9a9a9a;

  /* Shadow alphas dialed up under dark surface to remain perceptible */
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:          0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 6px 18px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 12px 32px rgba(0, 0, 0, 0.65);
}