/* ============================================================================
   app/css/v3/tokens.css -- the designed system's tokens, copied from
   mocks/v2/shared/tokens.css (the real source of truth, Joe's 09-27 pick:
   Ethan's dashboard skill merged with ours). Per glass-dashboard-builder
   pitfall #1 this is the real file, not a retyped lookalike. Differences from
   the mock copy, all deliberate and listed here:
   - the self-hosted @font-face lines are dropped (fonts come from the Google
     Fonts link in index.html; every face keeps its fallback stack);
   - the mock's global element resets (*, button, input, svg, p) are dropped
     so the live app's own base styles in style.css are untouched;
   - the page ground (body gradient + noise) is gated on html[data-design="v3"]
     so Classic still renders exactly as before.
   The :root tokens themselves are global: defining them costs Classic nothing.
   ========================================================================== */
/* ============================================================================
   Sales Team HQ redesign, shared tokens (mocks/v2/shared/tokens.css)
   Base: mock E "Minimal Signal" (mocks/inbox-redesign-e-minimal-signal.html,
   lines 11-41 verbatim) plus the additions from the approved plan (Part 2a).

   RULES BAKED IN HERE
   - --ink-3 (#66666c, 3.5:1 on --bg-0) NEVER carries a value or a label. It is
     for placeholders, disabled chevrons and decorative separators only. Anything
     a person must read uses --ink-2 or brighter.
   - --ruby-deep is the only red that passes 4.5:1 with white text. Use it for
     a filled badge; --ruby itself is for dots, rings, borders and text on dark.
   - Pills are Pattern B (dim fill + hue border), never solid. The single
     exception is E's .zone-pill.now (a solid "Can send now" pill).
   - FONT SWAP TO TELL JOE: E used IBM Plex Mono. design-tree's internal-tools
     row is Space Grotesk / Inter / JetBrains Mono, so --font-mono is JetBrains
     Mono (Plex Mono stays as the fallback) and --font-display is Space Grotesk
     for display roles only (purpose line, ladder numbers, card names). One line
     below flips it back: set --font-mono to the Plex stack and --font-display
     to var(--font-ui).
   ========================================================================== */

/* Self-hosted copies so offline / sandbox renders match the Google Fonts link. */

:root{
  /* ---- E's tokens, verbatim ---- */
  --bg-0:#0a0a0b;
  --bg-1:#111113;
  --bg-2:#17171a;
  --bg-3:#1d1d20;
  --bg-4:#26262a;
  --line-1:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-3:rgba(255,255,255,.17);
  --ink-0:#f1f1f3;
  --ink-1:#a3a3ac;
  --ink-2:#8b8b92;
  --ink-3:#66666c;            /* decorative only, see the rule above */
  --ruby:#ff3b4e;
  --ruby-soft:rgba(255,59,78,.42);
  --ruby-wash:rgba(255,59,78,.12);
  --hot:#33d17e;
  --warm:#f2a93b;
  --cold:#84848c;
  --stage-new:#8b93a8;
  --stage-qualified:#4d8dff;
  --stage-pitched:#f2a93b;
  --stage-booked:#33d17e;
  --stage-disq:#ef4b5c;
  --zone-now:#33d17e;
  --zone-mc:#f2a93b;
  --zone-ig:#84848c;
  --r-s:6px; --r-m:10px; --r-l:16px;

  /* ---- additions (plan 2a) ---- */
  --ruby-deep:#e2273a;        /* the only red that passes with white text */
  --ruby-ink:#ffffff;

  /* HQ's 13 lead stages, grouped onto E's palette. Every stage maps to one of these six. */
  --stage-engaged:#f2a93b;    /* rapport, engaged */
  --stage-resource:#4d8dff;   /* resource_sent */
  --stage-money:#33d17e;      /* call_pitched, booked, showed, deposit_paid, closed_won */
  --stage-terminal:#84848c;   /* not_interested, dead */
  /* --stage-new #8b93a8 and --stage-disq #ef4b5c come from E above */

  /* meaning of a number */
  --verified:#33d17e;         /* green dot: a system saw it (GHL, app-logged) */
  --self:transparent;         /* ring: self-reported, earns no points */
  --self-ring:rgba(255,255,255,.34);
  --zero:#ef4b5c;             /* ZERO badge on an outcome cell */
  --zero-wash:rgba(239,75,92,.12);
  --sim-line:rgba(255,255,255,.28);  /* dashed SIMULATED chip */

  /* washes for pattern-B pills (dim fill + hue border, never solid) */
  --hot-wash:rgba(51,209,126,.12);   --hot-line:rgba(51,209,126,.38);
  --warm-wash:rgba(242,169,59,.12);  --warm-line:rgba(242,169,59,.40);
  --cold-wash:rgba(132,132,140,.12); --cold-line:rgba(132,132,140,.40);
  --blue-wash:rgba(77,141,255,.12);  --blue-line:rgba(77,141,255,.40);
  --ruby-line:rgba(255,59,78,.42);

  /* radius hierarchy: not everything shares one corner */
  --r-4:4px;   /* kbd, tiny badges */
  --r-6:6px;   /* chips, inputs, small buttons */
  --r-10:10px; /* popovers, stat tiles, ladder cells */
  --r-16:16px; /* cards, sheets */
  --r-20:20px; /* pills */

  /* E's type sizes as tokens (px) */
  --fs-11:11px;
  --fs-115:11.5px;
  --fs-12:12px;
  --fs-125:12.5px;
  --fs-13:13px;
  --fs-145:14.5px;
  --fs-22:22px;

  /* spacing 4 -> 26 */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px;
  --sp-7:16px; --sp-8:18px; --sp-9:20px; --sp-10:22px; --sp-11:24px; --sp-12:26px;

  --row-h:52px;               /* E's list row; frame Density toggles 44px */
  --topbar-h:56px;
  --list-w:380px;
  --drawer-w:336px;

  /* breakpoints (documentation only, CSS cannot read them in @media) */
  --bp-phone:640px;
  --bp-narrow:980px;
  --bp-wide:1180px;

  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-display:'Space Grotesk','Inter',-apple-system,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================================
   V3 DESIGN UPGRADE (2026-09-27, Joe's request: "upgrade the design, color
   scheme, accessories, using our dashboard skills, ethan's, as well ours +
   merged"). Additive only — nothing above this line changes, so the 55
   existing v2 mocks still render exactly as before. Ruby stays the ONE brand
   accent (locked 2026-09-26); this is not a lime/palette swap, it's the
   founder dashboard's "merged" richness (Signal treatment: ambient mesh wash,
   layered glass-not-frosted cards, glow reserved for real meaning) executed
   against Sales Team HQ's own semantic colors, plus Ethan's flat argument
   (no backdrop-filter) kept intact throughout.
   Glow budget (glass-dashboard-builder's rule): a tile glows only when it is
   money, urgent-right-now, or the one live signal on the page — never as
   decoration. Most tiles on a screen should NOT glow.
   ========================================================================== */
:root{
  /* ambient mesh washes — corner radials tinted to what the PAGE is mostly
     about (money page = green-leaning, urgent page = ruby-leaning). Raised
     2026-09-27 (v1 was .10/.05 — invisible layered on E's own base gradient;
     Joe: "I don't see the upgrade"). Still never covers text without a plain
     surface under it (contact card, stat tile) so contrast holds. */
  --mesh-ruby-a:rgba(255,59,78,.22);   --mesh-ruby-b:rgba(255,59,78,.11);
  --mesh-hot-a:rgba(51,209,126,.19);   --mesh-hot-b:rgba(51,209,126,.10);
  --mesh-warm-a:rgba(242,169,59,.19);  --mesh-warm-b:rgba(242,169,59,.10);
  --mesh-blue-a:rgba(77,141,255,.17);  --mesh-blue-b:rgba(77,141,255,.09);

  /* meaningful glow — a soft ring-light behind a tile, never a blur-everywhere
     effect. Reserve for: verified money, first-touch-overdue, can-send-now.
     Raised alongside the mesh: v1's glow read as a thin outline, not a glow. */
  --glow-hot:0 0 0 1.5px rgba(51,209,126,.4),0 0 0 6px rgba(51,209,126,.12),0 0 32px -4px rgba(51,209,126,.75);
  --glow-warm:0 0 0 1.5px rgba(242,169,59,.4),0 0 0 6px rgba(242,169,59,.12),0 0 32px -4px rgba(242,169,59,.7);
  --glow-ruby:0 0 0 1.5px rgba(255,59,78,.44),0 0 0 6px rgba(255,59,78,.14),0 0 36px -4px rgba(255,59,78,.8);
  --glow-blue:0 0 0 1.5px rgba(77,141,255,.38),0 0 0 6px rgba(77,141,255,.12),0 0 30px -4px rgba(77,141,255,.7);

  /* the merged system's real card recipe (design-merged.css §5, "flat not
     frosted"): a layered top-sheen gradient over a LIFTED surface (bg-2, not
     bg-1 — v1 sat on the same base tone as a plain .panel, so the "richer"
     surface was the same color as the page around it and never separated).
     Still no blur (Ethan's flat argument holds). */
  --card-v3-bg:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.022) 45%,rgba(255,255,255,0) 75%),var(--bg-2);
  --card-v3-bg-2:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 75%),var(--bg-3);
  --card-v3-border:rgba(255,255,255,.16);
  --card-v3-border-lift:rgba(255,255,255,.24);
  --card-v3-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 1px 2px rgba(0,0,0,.45),0 24px 40px -20px rgba(0,0,0,.85);
  --card-v3-shadow-lift:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.4),0 32px 52px -20px rgba(0,0,0,.9);

  /* dim-fill+border pill, one level richer: a faint inner top highlight so
     an "on" pill reads as lit, not just outlined (Pattern B is unchanged). */
  --pill-v3-on-shadow:inset 0 1px 0 rgba(255,255,255,.08);

  --r-14:14px; --r-18:18px;
}

/* ---- E's page ground, verbatim ---- */
html[data-design="v3"] body{
  margin:0;
  background:
    radial-gradient(1300px 820px at 12% -12%, rgba(255,59,78,.055), transparent 55%),
    radial-gradient(1100px 760px at 104% -6%, rgba(77,141,255,.05), transparent 52%),
    radial-gradient(900px 680px at 50% 112%, rgba(255,255,255,.03), transparent 58%),
    linear-gradient(180deg,#0e0e11 0%,#09090b 45%,#050506 100%);
  color:var(--ink-0);
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
html[data-design="v3"] body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html[data-design="v3"] #root{position:relative;z-index:1;}
.scroll{scrollbar-width:thin;scrollbar-color:var(--bg-4) transparent;}
.scroll::-webkit-scrollbar{width:8px;height:8px;}
.scroll::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:8px;}
.scroll::-webkit-scrollbar-track{background:transparent;}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}