/* ============================================================
   REVEAL — Design Tokens: Color + Type
   Futuristic, high-tech, minimal. Near-black canvas, B/W system,
   a single muted-green accent used sparingly.

   Fonts: Space Grotesk (display/body) + JetBrains Mono (labels/legal).
   The @import below pulls in their @font-face rules so the families
   resolve out of the box. If/when local brand font files are uploaded,
   add @font-face for them ABOVE this import (more specific wins) — the
   tokens stay pointed at the same family names either way.

   SOURCE OF TRUTH: claude.ai/design → reveal-design-system
   `_ds/reveal-design-system-892b283d-318b-4ad1-a61e-30fad2dc593e/colors_and_type.css`
   Kept verbatim so design-system updates can be dropped in wholesale.
   Page-level (light "paper") styling lives in site.css and layers on top.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");


:root {
  /* ---------- SURFACES (near-black, cool-neutral) ---------- */
  --bg-0: #0A0A0F;   /* page canvas — primary near-black */
  --bg-1: #0D0D14;   /* alt canvas / raised section */
  --bg-2: #121219;   /* card / surface */
  --bg-3: #17171F;   /* hover surface / input */

  /* ---------- FOREGROUND (white → grey ramp) ---------- */
  --fg-0: #FFFFFF;   /* primary text, logo, headings */
  --fg-1: #C8C8D0;   /* secondary text / subheads */
  --fg-2: #8A8A95;   /* muted body / supporting copy */
  --fg-3: #5C5C66;   /* faint — legal, captions, disabled */
  --fg-4: #36363E;   /* hairline labels, lowest contrast text */

  /* ---------- BORDERS / HAIRLINES (white at low alpha) ---------- */
  --line-0: rgba(255,255,255,0.06);  /* faint divider */
  --line-1: rgba(255,255,255,0.10);  /* default border */
  --line-2: rgba(255,255,255,0.16);  /* raised / focus-adjacent */
  --line-3: rgba(255,255,255,0.28);  /* strong / button outline */

  /* ---------- ACCENT — muted desaturated green (USE SPARINGLY) --- */
  --accent: #4ADE80;                 /* primary accent */
  --accent-deep: #22C55E;            /* deeper variant */
  --accent-dim: #2F8F57;             /* desaturated, for fine lines */
  --accent-glow: rgba(74,222,128,0.35);  /* hover glow */
  --accent-trace: rgba(74,222,128,0.10);  /* barely-there gradient trace */

  /* ---------- SEMANTIC STATE COLOURS (app surfaces only) ----------
     Muted, desaturated, tuned for the near-black canvas. Used ONLY for
     status meaning (badges, dots) — never as decoration or fills.
     Each has: text (on dark), tint (bg), edge (border), dot (solid). */
  /* found / success — reuses the brand green */
  --st-found-text: #5BE49B;
  --st-found-tint: rgba(74,222,128,0.10);
  --st-found-edge: rgba(74,222,128,0.24);
  --st-found-dot:  #4ADE80;
  /* searching / pending — desaturated amber */
  --st-search-text: #E6BA55;
  --st-search-tint: rgba(224,179,65,0.10);
  --st-search-edge: rgba(224,179,65,0.26);
  --st-search-dot:  #E0B341;
  /* not found / failed — soft, non-alarming red */
  --st-fail-text: #E98C80;
  --st-fail-tint: rgba(224,86,75,0.10);
  --st-fail-edge: rgba(224,86,75,0.26);
  --st-fail-dot:  #E0564B;
  /* resolved / done / neutral */
  --st-done-text: #8A8A95;
  --st-done-tint: rgba(255,255,255,0.04);
  --st-done-edge: rgba(255,255,255,0.10);
  --st-done-dot:  #5C5C66;

  /* ---------- TEXTURE ---------- */
  --dot: rgba(255,255,255,0.025);    /* faint dot-grid dot color */
  --dot-size: 22px;                  /* dot-grid cell */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Space Grotesk", "SF Pro Display", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (display) ---------- */
  --t-hero: 600 clamp(2.6rem, 6vw, 4.5rem)/1.04 var(--font-display);
  --t-h1:   600 clamp(2rem, 4vw, 3rem)/1.08 var(--font-display);
  --t-h2:   600 1.75rem/1.15 var(--font-display);
  --t-h3:   500 1.25rem/1.25 var(--font-display);
  --t-body-lg: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.5 var(--font-display);
  --t-body: 400 1rem/1.6 var(--font-display);
  --t-small: 400 0.875rem/1.6 var(--font-display);

  /* ---------- MONO (labels / eyebrows / legal) ---------- */
  --t-eyebrow: 500 0.75rem/1 var(--font-mono);   /* + uppercase + tracking */
  --t-label:   500 0.8125rem/1.4 var(--font-mono);
  --t-legal:   400 0.8125rem/1.7 var(--font-mono);

  /* ---------- TRACKING ---------- */
  --track-hero: -0.03em;   /* tight on big headings */
  --track-head: -0.02em;
  --track-eyebrow: 0.22em; /* wide on uppercase mono labels */
  --track-label: 0.04em;

  /* ---------- RADII (subtle, hardware-precise) ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 48px rgba(0,0,0,0.6);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle, premium */
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;
}