/* ==========================================================================
   iAmAI — Shared Design Tokens
   "Warm Charcoal v8" (2026-06-02, site-wide refresh after 4 external reviews
   said the matrix/neon look read as intimidating/complex).

   What changed from v1 (Code Space deep-black) to v8 (Warm Charcoal):
     • Surface flipped from #0A0A0F (deep black) → #2B2A2E (warm matte).
       Same Apple "Space Gray" family, with hue 252° saturation 5% — feels
       like brushed graphite under tungsten light, not under fluorescent.
     • Cards get a TITANIUM finish via the new --card-* tokens — a 5° hue
       gradient + 1px inset highlight + soft drop shadow. Replaces the
       previous matte solid + cyan border treatment.
     • Purple aliased to a darker cyan so the cyan→purple gradients many
       pages use now read as a single-color cyan sweep (cleaner; reviewers
       said the purple felt like "tech-bro").
     • Code-rain bg utilities removed from the central; pages must opt
       in to ambient via the new .ambient-grid / .ambient-blob classes
       (much calmer than the scrolling code columns).

   Usage: <link rel="stylesheet" href="/design-tokens.css">
          (must be loaded BEFORE the page's own <style> block, so cascading
          var(--...) references resolve.)

   The legacy token NAMES (--color-brand-500, --color-surface-50, etc.) are
   preserved so every existing page picks up the new palette automatically.
   New tokens for the titanium card finish (--card-bg-gradient,
   --card-shadow-titanium) are added so pages can opt in explicitly.
   ========================================================================== */

/* Type system.
     • Heebo — Hebrew + Latin headings/body. Carries the brand voice.
     • Assistant — kept for back-compat with earlier pages; will phase out.
     • Fira Code — monospaced numerals + code fragments per the DNA spec.
       Variable axis "wght" so we get one weight family across the site. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');

:root {
  /* ──────────────────────────────────────────────────────────────────────
     Code Space DNA — semantic tokens.
     These are the canonical names new code should use.
     Legacy names (below) re-point at these values so existing pages adopt
     the new palette without per-file edits.
     ────────────────────────────────────────────────────────────────────── */

  /* Warm Charcoal foundation (2026-06-02 v8).
     The old #0A0A0F was deep-black with a blue lean; v8 lightens to a
     warm matte charcoal so cards/components can sit on it with depth,
     and the cyan accent reads as warm-on-warm rather than cold-on-cold.
     HSL hue 252° (faint violet-warm), saturation 5% — just enough chroma
     that the surface has "temperature" without reading as actually
     colored. Matches Apple's Space Gray family in feel. */
  --cs-bg:        #2B2A2E;   /* page surface — was #0A0A0F */
  --cs-bg-2:      #322F37;   /* sectioned panels — was #0D1117 */
  --cs-bg-3:      #37363B;   /* cards (solid fallback) — was #131A24 */
  --cs-bg-4:      #45434A;   /* hover/active tint — was #1B2330 */
  --cs-border:    rgba(255, 255, 255, 0.08);
  --cs-border-2:  rgba(255, 255, 255, 0.14);   /* hover/focus */

  /* ─── Titanium card finish (new in v8) ───
     Layer these on .card / .panel / .stats / .cta blocks to get the
     brushed-metal feel:
       background: var(--card-bg-gradient);
       box-shadow: var(--card-shadow-titanium);
     Hover-state shadow is also tokenized so it's tweakable centrally. */
  --card-grad-top:        #3F3D44;   /* lit edge */
  --card-grad-bot:        #312F36;   /* shadowed edge */
  --card-bg-gradient:     linear-gradient(180deg, var(--card-grad-top) 0%, var(--card-grad-bot) 100%);
  /* 2026-06-02b: inset highlight dialed back 0.10 → 0.07 — at 0.10 it
     stacked on top of the card border (0.08 white) and read as a hard
     white pinstripe on the top edge, especially noticeable when many
     cards sat side-by-side. 0.07 reads as a "lit edge" without a
     visible line. */
  --card-shadow-titanium: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                          0 4px 16px rgba(0, 0, 0, 0.32);
  --card-shadow-titanium-hover: inset 0 1px 0 rgba(255, 255, 255, 0.09),
                                0 8px 24px rgba(0, 0, 0, 0.40);

  /* ─── Chrome surfaces (header/footer) ───
     Slightly darker than --cs-bg so the "frame" of the page reads as
     a separate band from the main content area. Not gradient, not
     highlighted — just a subtly different shade. */
  --cs-chrome:        #222125;   /* ~7 lightness points darker than bg */

  /* Text. White-with-a-fade so anything below brand is calm. */
  --cs-text:        #E6EAF2;
  --cs-text-mute:   #8B93A7;
  --cs-text-dim:    #5A6478;

  /* Lead color: strong cyan. Used for highlights, primary buttons,
     active states, link hovers. Tuned so it doesn't burn at scale. */
  --cs-cyan:        #00D4FF;
  --cs-cyan-2:      #4DDEFF;   /* hover */
  --cs-cyan-3:      #00A8CC;   /* pressed / darker emphasis */
  --cs-cyan-glow:   rgba(0, 212, 255, 0.18);   /* shadow glow */
  --cs-cyan-soft:   rgba(0, 212, 255, 0.08);   /* hover tint */

  /* Secondary accent — DROPPED in v8.
     The old #8B5CF6 purple created a "tech-bro" feel reviewers flagged
     as intimidating. v8 aliases purple to a darker cyan so anywhere the
     legacy code referenced purple (gradients, accent borders) it now
     renders as a deeper cyan — single-color palette, calmer overall.
     If a page needs an actual secondary color in the future, define a
     new --cs-* token rather than re-introducing purple here. */
  --cs-purple:      var(--cs-cyan-3);
  --cs-purple-2:    var(--cs-cyan-2);
  --cs-purple-soft: var(--cs-cyan-soft);

  /* Status — calibrated for dark backgrounds. Green leans toward emerald
     so it doesn't compete with cyan; red leans toward coral so it doesn't
     feel like a system error. */
  --cs-success:     #34D399;
  --cs-success-soft:rgba(52, 211, 153, 0.10);
  --cs-warn:        #FBBF24;
  --cs-warn-soft:   rgba(251, 191, 36, 0.10);
  --cs-danger:      #F87171;
  --cs-danger-soft: rgba(248, 113, 113, 0.10);

  /* Mono stack. Used for any number that wants the "live data" feel —
     statistics, prices, timestamps, code spans. */
  --cs-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
  --cs-sans: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ──────────────────────────────────────────────────────────────────────
     Legacy alias layer — keep names; flip values to Code Space.
     Any page reading var(--color-surface-50) etc. now gets the dark theme.
     ────────────────────────────────────────────────────────────────────── */

  /* Brand → cyan */
  --color-brand-50:   var(--cs-cyan-soft);
  --color-brand-500:  var(--cs-cyan);
  --color-brand-700:  var(--cs-cyan-3);
  --color-brand-900:  #0A8AAA;

  /* Accent → purple (was warm orange) */
  --color-accent-50:  var(--cs-purple-soft);
  --color-accent-500: var(--cs-purple);
  --color-accent-900: #6D3FCB;

  /* Surface — FLIPPED. White → dark layers.
     Mapping preserves the legacy semantics: 0 = "card on the page",
     50 = "the page itself" (one step below cards), 100/200 = even
     lower (hovered/divider surfaces). 500 = muted text, 900 = body text.
     This inversion is what auto-darkens every legacy page. */
  --color-surface-0:    var(--cs-bg-3);   /* cards (was #ffffff) */
  --color-surface-50:   var(--cs-bg);     /* page (was #f8f9fa)  */
  --color-surface-100:  var(--cs-bg-2);   /* hovered card layer  */
  --color-surface-200:  var(--cs-border-2);
  --color-surface-500:  var(--cs-text-mute);
  --color-surface-900:  var(--cs-text);

  /* Status — same calibration as the cs-* tokens above. */
  --color-success-50:  var(--cs-success-soft);
  --color-success-500: var(--cs-success);
  --color-success-900: #10B981;

  --color-warning-50:  var(--cs-warn-soft);
  --color-warning-500: var(--cs-warn);
  --color-warning-900: #F59E0B;

  --color-error-50:    var(--cs-danger-soft);
  --color-error-500:   var(--cs-danger);
  --color-error-900:   #DC2626;

  /* ─── Typography scale ─── */
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-lg:      18px;
  --text-xl:      22px;          /* was 24 — compact hero rule */
  --text-2xl:     28px;          /* was 32 — compact hero rule */
  --text-display: 32px;          /* was 48 — H1 cap per UX rule */

  /* ─── Spacing — 4px grid ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Border radius ─── */
  --radius-sm:   6px;     /* inputs (was 4) */
  --radius-md:   10px;    /* cards (was 8) */
  --radius-lg:   14px;    /* larger cards (was 12) */
  --radius-xl:   18px;    /* hero blocks (was 16) */
  --radius-pill: 24px;
  --radius-full: 9999px;

  /* ─── Shadows — recomposed for dark surfaces ─── */
  /* On dark backgrounds Material's gray shadows disappear.
     We use deep-black opacity + a soft cyan glow on elevated items. */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.40),
              0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45),
              0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50),
              0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl:0 20px 48px rgba(0, 0, 0, 0.55),
              0 0 0 1px var(--cs-border);
  --shadow-cyan: 0 0 0 1px var(--cs-cyan),
                 0 0 24px var(--cs-cyan-glow);

  /* ─── Surface overlays + opacity tokens ─── */
  --backdrop-overlay: rgba(0, 0, 0, 0.65);
  --opacity-muted: 0.60;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Color-scheme hints the UA-rendered widgets (scrollbar, select arrows). */
  color-scheme: dark;
}

/* Selection: cyan so it reads as "iAmAI selected this". */
::selection {
  background: var(--cs-cyan);
  color: var(--cs-bg);
}

/* Scrollbar — slim, low-contrast, cyan on hover. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cs-border-2) transparent;
}
*::-webkit-scrollbar          { width: 10px; height: 10px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: var(--cs-border-2); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--cs-cyan-3); }

/* ──────────────────────────────────────────────────────────────────────
   Ambient background utilities (v8, opt-in)
   Drop these two divs at the top of <body> on any page that wants the
   warm-charcoal ambient feel WITHOUT a code-rain animation:

     <div class="ambient-grid" aria-hidden="true"></div>
     <div class="ambient-blob" aria-hidden="true"></div>

   Make sure other content sits at z-index ≥ 1 (or wrap it in a
   .ambient-content shell). They're position:fixed so they don't shift
   on scroll, and pointer-events:none so they don't intercept clicks.
   ────────────────────────────────────────────────────────────────────── */
.ambient-grid {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Barely-visible dot grid — fades to nothing in the page center via
     a radial mask, so it only frames the page peripherally. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image:        radial-gradient(ellipse at center, transparent 30%, #000 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}
.ambient-blob {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  top: -300px; right: -250px;
  width: 460px; height: 460px;
  background: var(--cs-cyan);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.04;   /* faint warm glow at top-right corner only */
}
.ambient-content {
  /* Wrap page content in this so it sits above the ambient layers. */
  position: relative;
  z-index: 1;
}

/* Reusable titanium card class — pages can either apply this directly
   or compose their own component using the same tokens. */
.card-titanium {
  background: var(--card-bg-gradient);
  border: 1px solid var(--cs-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow-titanium);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card-titanium:hover {
  border-color: var(--cs-border-2);
  box-shadow: var(--card-shadow-titanium-hover);
}