/* ============================================================================
   tokens.css — the single source of truth for colour, type and spacing.
   Change a value here and it changes everywhere. Nothing below this file
   should contain a raw hex code.

   The palette is lifted deliberately from zyfolks.com's global.css so the
   personal site and the company site read as one identity:
     --c-purple / --c-indigo / --c-violet are the ZyFolks brand values,
     --c-bg / --c-raised are its dark surfaces.
   ========================================================================== */

/* ---- Self-hosted variable fonts (latin subset, OFL licensed) -------------
   Variable, so 400–700 costs two files instead of five: 69 KB total.
   font-display:swap — text paints in the fallback immediately rather than
   holding the hero invisible while a font downloads.                        */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-var.woff2') format('woff2-variations'),
       url('../assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2-variations'),
       url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- Surfaces ---------------------------------------------------- */
  --c-bg: #010b17;          /* page */
  --c-bg-alt: #040e1d;      /* alternating band */
  --c-raised: #0d1224;      /* cards */
  --c-raised-hi: #131a30;   /* cards, hovered */

  /* ---- Brand ------------------------------------------------------- */
  --c-purple: #a855f7;
  --c-indigo: #6366f1;
  --c-violet: #c084fc;
  --c-cyan: #22d3ee;        /* used sparingly, for accents only */

  /* ---- Ink ---------------------------------------------------------
     Every value below clears WCAG AA on --c-bg. The old site used
     rgba(255,255,255,.5) for all body copy, which sat at 4.2:1 — under
     the 4.5:1 floor. These are measured, not guessed.                  */
  --c-ink: #f4f5f7;         /* 18.9:1 — headings */
  --c-ink-2: #b9becd;       /* 10.6:1 — body copy */
  --c-ink-3: #8d94a6;       /*  6.1:1 — muted / meta */

  /* ---- Lines & glass ------------------------------------------------ */
  --c-line: rgba(255, 255, 255, 0.09);
  --c-line-hi: rgba(192, 132, 252, 0.42);
  --c-glass: rgba(13, 18, 36, 0.72);

  /* ---- Gradients -----------------------------------------------------
     Two brand gradients, and the difference matters.

     --g-brand runs all the way to indigo and is for DECORATIVE fills only:
     gradient text on the dark page, the rule under a nav link. Nothing is
     ever printed on top of it.

     --g-fill stops at purple and is for surfaces that CARRY TEXT — the
     primary button, the monogram. Measured against #0b0616 ink:
         violet #c084fc  7.56:1     purple #a855f7  5.05:1
     The indigo end of --g-brand only reaches 4.47:1, which is under the
     4.5:1 floor for body-size text, so it is deliberately excluded here.
     (White ink is worse on all three stops — 2.6:1 to 4.5:1 — which is why
     the button ink is near-black rather than white.)                      */
  --g-brand: linear-gradient(120deg, var(--c-violet) 0%, var(--c-purple) 45%, var(--c-indigo) 100%);
  --g-fill: linear-gradient(120deg, var(--c-violet) 0%, var(--c-purple) 100%);
  --g-rule: linear-gradient(90deg, var(--c-violet), transparent);

  /* Ink used on top of --g-fill. */
  --c-on-fill: #0b0616;

  /* ---- Type --------------------------------------------------------- */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid scale. clamp() means no layout jumps at breakpoints and no
     font-size media queries anywhere in the stylesheet.                */
  --t-hero: clamp(2.9rem, 1.4rem + 6.6vw, 6.4rem);
  --t-h2: clamp(2rem, 1.35rem + 2.7vw, 3.4rem);
  --t-h3: clamp(1.12rem, 1.02rem + 0.4vw, 1.35rem);
  --t-lead: clamp(1.06rem, 0.98rem + 0.38vw, 1.28rem);
  --t-body: clamp(0.97rem, 0.93rem + 0.2vw, 1.06rem);
  --t-small: 0.875rem;
  --t-eyebrow: 0.75rem;

  /* ---- Space (4px base) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);

  /* ---- Shape & shadow ------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 34px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px var(--c-line-hi), 0 18px 50px -18px rgba(168, 85, 247, 0.55);

  /* ---- Motion --------------------------------------------------------
     One easing curve for the whole site. Consistency in motion reads as
     craft the same way consistent spacing does.                          */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 720ms;

  /* ---- Layout --------------------------------------------------------- */
  --w-max: 1200px;
  --w-prose: 62ch;
  --pad-x: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --header-h: 68px;
}