/* ============================================================
   variables.css — design tokens
   Single source of truth for color, type, space, motion, layout.
   Theme-specific values live under [data-theme] selectors.
   ============================================================ */

:root {
  /* ---- Color primitives (raw brand values) ---- */
  --c-obsidian: #0a0a0c;
  --c-obsidian-lift: #101014;
  --c-graphite: #141419;
  --c-graphite-2: #1b1b21;
  --c-graphite-3: #24242c;
  --c-ivory: #f2ede3;
  --c-ivory-dim: #e4ddcf;
  --c-stone: #a29b8d;
  --c-stone-deep: #6d6659;
  --c-azure: #3b82f6;
  --c-azure-soft: #8fb4fb;
  --c-azure-deep: #1e4fd0;

  /* ---- Typography families ---- */
  --font-display: "Satoshi", "Space Grotesk", ui-sans-serif, system-ui,
    -apple-system, sans-serif;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-display-1: clamp(2.9rem, 1.4rem + 6.4vw, 6.75rem);
  --fs-display-2: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.55vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
  --fs-sm: 0.925rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.76rem;

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-body: 1.62;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.75rem, 2.5rem + 4vw, 6.5rem);

  /* ---- Layout ---- */
  --w-container: 78rem; /* ~1248px */
  --w-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --nav-h: 4.75rem;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.2s;
  --t-med: 0.4s;
  --t-slow: 0.7s;

  /* ---- Z-index layers ---- */
  --z-base: 1;
  --z-raise: 10;
  --z-nav: 100;
  --z-menu: 200;
  --z-cursor: 300;
}

/* ============================================================
   DARK THEME (default / primary experience)
   ============================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--c-obsidian);
  --bg-elev: var(--c-graphite);
  --surface: var(--c-graphite-2);
  --surface-2: var(--c-graphite-3);

  --text: var(--c-ivory);
  --text-strong: #fbf8f1;
  --text-dim: var(--c-stone);
  --text-mute: var(--c-stone-deep);

  --accent: var(--c-azure);
  --accent-soft: var(--c-azure-soft);
  --accent-text: var(--c-azure);
  --on-accent: #ffffff;

  --border: rgba(242, 237, 227, 0.09);
  --border-strong: rgba(242, 237, 227, 0.16);
  --hairline: rgba(242, 237, 227, 0.06);

  --nav-bg: rgba(10, 10, 12, 0.72);
  --focus: var(--c-azure);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 40px 90px -50px rgba(0, 0, 0, 0.9);

  --glow: radial-gradient(
    120% 120% at 70% 0%,
    rgba(59, 130, 246, 0.14),
    transparent 60%
  );
  --grid-line: rgba(242, 237, 227, 0.045);
  --scrim: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.6));
}

/* Light theme removed — the site is permanently dark (black). */