/* ===========================================================================
   Pillow Client — tokens
   One source of truth for colour, type, space, motion. Nothing below this file
   hardcodes a hex value.
   =========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- surface ---------------------------------------------------------- */
  --bg:            #08080b;
  --bg-1:          #0c0c11;
  --bg-2:          #101017;
  --surface:       rgba(255, 255, 255, 0.028);
  --surface-2:     rgba(255, 255, 255, 0.052);
  --surface-3:     rgba(255, 255, 255, 0.082);
  --line:          rgba(255, 255, 255, 0.075);
  --line-2:        rgba(255, 255, 255, 0.13);
  --line-3:        rgba(255, 255, 255, 0.22);

  /* --- ink -------------------------------------------------------------- */
  --text:          #f3f3f7;
  --text-2:        #a9a9ba;
  --text-3:        #84848f;

  /* --- accent ----------------------------------------------------------- */
  --violet:        #8b7cf6;
  --violet-soft:   #c9bcff;
  --violet-deep:   #6d5be0;
  --violet-ink:    #0a0a0f;
  --glow:          rgba(139, 124, 246, 0.42);
  --glow-soft:     rgba(139, 124, 246, 0.16);

  /* --- semantic --------------------------------------------------------- */
  --ok:            #5fe3b0;
  --ok-dim:        rgba(95, 227, 176, 0.14);
  --warn:          #ffc46b;
  --warn-dim:      rgba(255, 196, 107, 0.14);
  --bad:           #ff8c8c;
  --bad-dim:       rgba(255, 140, 140, 0.14);

  /* --- geometry --------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  9px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  --wrap:      1200px;
  --wrap-narrow: 820px;
  --gutter:    clamp(18px, 4vw, 40px);
  --section-y: clamp(54px, 6.6vw, 98px);

  /* --- type ------------------------------------------------------------- */
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.9rem, 7.2vw, 5.4rem);
  --fs-h1:      clamp(2.2rem, 5vw, 3.6rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3:      clamp(1.12rem, 1.7vw, 1.32rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.16rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.795rem;
  --fs-micro:   0.72rem;

  --tracking-tight: -0.03em;
  --tracking-wide:  0.14em;

  /* --- depth ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 90px -32px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-glow: 0 20px 70px -28px var(--glow);

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 520ms;

  --nav-h: 66px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}