/* ==========================================================================
   CODIRISE — Design Tokens
   Single source of truth. Nothing below this file hardcodes a colour or size.
   ========================================================================== */

/* Fonts are self-hosted rather than pulled from Google. Two variable files
   cover every weight the site uses (47 KB total), there is no render-blocking
   third-party stylesheet in the critical path, and no visitor data leaves the
   origin. Regenerate with tools/build-fonts.sh. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-var.woff2") format("woff2-variations"),
       url("../fonts/geist-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var.woff2") format("woff2-variations"),
       url("../fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --blue-primary: #09090b;
  --blue-accent: #000000;
  --silver: #09090b;
  --canvas: #ffffff;

  /* Derived surfaces. Each step is a measured lift off the canvas so panels
     read as elevation, not as new colours. */
  --surface-1: #ffffff; /* cards */
  --surface-2: #f4f4f5; /* raised card / hover */
  --surface-3: #e4e4e7; /* inputs, active states */
  --canvas-deep: #fafafa; /* footer, code wells */

  /* Ink */
  --ink: #18181b;
  --ink-strong: #000000;
  --ink-muted: #52525b;
  --ink-faint: #71717a;

  /* Lines. The whole layout is drawn with these — keep them honest. */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --line-faint: rgba(0, 0, 0, 0.04);

  /* Accent washes */
  --accent-soft: rgba(0, 0, 0, 0.04);
  --accent-glow: rgba(0, 0, 0, 0.06);
  --accent-ring: rgba(37, 99, 235, 0.25);

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --fs-hero: clamp(34px, 6.5vw, 68px);
  --fs-display: clamp(28px, 5vw, 48px);
  --fs-h2: clamp(24px, 3.8vw, 36px);
  --fs-h3: clamp(19px, 2.5vw, 22px);
  --fs-lead: clamp(16px, 1.4vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 1;
  --lh-heading: 1.15;
  --lh-body: 1.75;

  --ls-hero: -0.05em;
  --ls-h2: -0.035em;
  --ls-h3: -0.02em;
  --ls-mono: 0.08em;

  /* ---- Space — strict 8px system -------------------------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 40px;
  --s-8: 48px;
  --s-10: 60px;
  --s-12: 72px;
  --s-15: 90px;
  --s-20: 120px;

  --section-y: clamp(40px, 6vw, 80px);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(14px, 4vw, 36px);

  /* ---- Radius --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation — barely there, on purpose --------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 620ms;

  /* ---- Layers --------------------------------------------------------- */
  --z-rails: 1;
  --z-content: 2;
  --z-header: 60;
  --z-overlay: 80;
  --z-modal: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}