/* Operator Co — Noche unified design tokens (site_v1 local copy)
 * Self-contained: fonts are self-hosted in assets/fonts/, no CDN, no Google.
 * Pairing: Bricolage Grotesque (display) / Hanken Grotesk (body) / Space Mono (accent).
 * Hanken latin subset is weight-independent (single file serves 400-700).
 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* paper / surface */
  --color-paper: #0E1117;
  --color-paper-2: #141925;
  --color-paper-3: #1A1F29;
  --color-ink: #F5F5F5;
  --color-ink-muted: #969CA8;
  --color-hairline: rgba(150,156,168,.18);
  --color-focus: #2F6FED;
  --color-operator-black: #0A0A0F;

  /* accents — rotating per product, one at a time */
  --color-accent: #FF7A1A;
  --color-accent-hover: #ff924a;
  --accent-orange: #FF7A1A;
  --accent-blue: #2F6FED;
  --accent-green: #2FA84F;
  --accent-teal: #159E93;
  --accent-magenta: #E0458B;
  --accent-amber: #D99A1B;
  --accent-purple: #6C5CE7;
  --accent-rose: #C9536B;

  /* type — unique, self-hosted, no CDN */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-display: 3.4rem;
  --text-display-s: 2.6rem;
  --text-h1: 2.2rem;
  --text-h2: 1.6rem;
  --text-h3: 1.25rem;
  --text-lg: 1.2rem;
  --text-base: 1rem;
  --text-sm: .9rem;
  --text-mono-eyebrow: .8rem;
  --text-zero: 5rem;
  /* display tracking — tighter on big type reads modern (Linear/Vercel do this) */
  --tracking-display: -0.025em;
  --tracking-h1: -0.02em;
  --tracking-h2: -0.015em;

  /* space */
  --space-2xs: .35rem;
  --space-xs: .6rem;
  --space-sm: .9rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --container: 1200px;

  /* radius / rules */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* motion */
  --dur-short: 140ms;
  --dur-mid: 260ms;
  --dur-long: 520ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in: cubic-bezier(.6,0,.8,1);
  --ease-in-out: cubic-bezier(.5,0,.5,1);
  /* hero glow — soft radial orange behind H1 (replaces photographic bg) */
  --hero-glow: radial-gradient(60% 50% at 22% 38%, rgba(255,122,26,.22), rgba(255,122,26,.04) 45%, transparent 70%);
  --hero-glow-secondary: radial-gradient(40% 36% at 82% 22%, rgba(47,111,237,.10), transparent 65%);
  /* terminal demo artifact — used in hero to anchor dev-tools identity */
  --demo-bg: #0B0E14;
  --demo-line: rgba(150,156,168,.12);

  /* z */
  --z-base: 1;
  --z-nav: 50;
  --z-bg: 0;

  /* social */
  --social-x: #E7E9EA;
  --social-github: #E7E9EA;
  --social-youtube: #FF4D4D;
  --social-linkedin: #5B9BD5;
}