/* ══════════════════════════════════════════════════
   DESIGN TOKENS — Refined Glass Light Theme
   Font: DM Sans (display) + JetBrains Mono (code)
   ══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root, html.light {
  /* Surfaces — aligned with landing page */
  --bg: #f0f0f3;
  --bg2: rgba(255,255,255,.72);
  --bg3: #e8e8ed;
  --bg-solid: #ffffff;

  /* Glass */
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.78);
  --glass-blur: 20px;
  --glass-border: rgba(255,255,255,.6);
  --glass-shadow: 0 8px 32px rgba(31,38,56,.08), 0 1px 2px rgba(31,38,56,.04);
  --glass-shadow-hover: 0 12px 40px rgba(31,38,56,.12), 0 2px 4px rgba(31,38,56,.06);

  /* Borders */
  --br: rgba(0,0,0,.06);
  --br2: rgba(0,0,0,.1);

  /* Text */
  --t1: #1a1f36;
  --t2: #525b7a;
  --t3: #8b93af;

  /* Accent palette */
  --cyan: #0ea5e9;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --purple: #8b5cf6;
  --indigo: #6366f1;

  /* Accent glass tints */
  --tag-bg: rgba(14,165,233,.06);
  --tag-br: rgba(14,165,233,.18);
  --hl-bg: rgba(14,165,233,.04);
  --card-hl-br: rgba(99,102,241,.3);
  --card-hl-sh: rgba(99,102,241,.08);

  /* Badge tints */
  --b-stage-bg: rgba(245,158,11,.08);  --b-stage-br: rgba(245,158,11,.22);
  --b-fund-bg: rgba(16,185,129,.08);   --b-fund-br: rgba(16,185,129,.22);
  --b-award-bg: rgba(139,92,246,.08);  --b-award-br: rgba(139,92,246,.22);
  --b-stealth-bg: rgba(239,68,68,.06); --b-stealth-br: rgba(239,68,68,.18);

  --hover-bg: rgba(99,102,241,.03);
  --q-br: rgba(0,0,0,.05);

  /* Fonts */
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Nav */
  --nav-bg: rgba(240,240,243,.65);

  /* Mesh gradient for page bg — warm tones matching landing */
  --mesh: radial-gradient(ellipse at 20% 0%, rgba(201,184,240,.08) 0%, transparent 50%),
          radial-gradient(ellipse at 80% 0%, rgba(168,216,234,.07) 0%, transparent 50%),
          radial-gradient(ellipse at 50% 100%, rgba(240,196,173,.06) 0%, transparent 50%),
          radial-gradient(ellipse at 35% 50%, rgba(184,224,210,.05) 0%, transparent 40%);
}