/* ==========================================================================
   G Factor — Design tokens (dark system)
   Near-black with a violet cast, the brand's electric violet as light,
   Host Grotesk for voice, Geist Mono for anything the system says.
   ========================================================================== */

@font-face {
  font-family: "Host Grotesk";
  src: url("../assets/fonts/HostGrotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Host Grotesk Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #06050e;
  --bg-2: #0a0918;
  --surface: #0f0e20;
  --surface-2: #161430;
  --surface-3: #1e1c40;

  /* Lines */
  --line: rgba(185, 175, 255, 0.1);
  --line-2: rgba(185, 175, 255, 0.18);
  --line-3: rgba(185, 175, 255, 0.32);

  /* Text */
  --text: #f3f2fa;
  --text-2: #b9b7cf;
  --text-3: #8e8caa;
  --text-4: #7a779d;

  /* Brand light */
  --violet: #3516c6;
  --violet-hi: #5b3bff;
  --violet-soft: #8f80ff;
  --lav: #b4a9f2;
  --glow-rgb: 91, 59, 255;

  /* Signals (used only inside example UIs) */
  --ok: #4ade9b;
  --warn: #f5b84b;
  --err: #ff6b81;

  /* Type */
  --font: "Host Grotesk", "Host Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.75rem, 1.15rem + 5.3vw, 6.25rem);
  --fs-h2: clamp(2.125rem, 1.2rem + 3.1vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-mono: 0.75rem;

  /* Space */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: 8rem;
  --rhythm-s: clamp(4rem, 2.5rem + 5vw, 7rem);
  --rhythm-m: clamp(5.5rem, 3rem + 8vw, 10rem);
  --rhythm-l: clamp(7rem, 4rem + 11vw, 14rem);

  /* Layout */
  --max: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3.6vw, 4.5rem);
  --col-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --header: 72px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Grain (same texture as the brand reference) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}