/* Refract — design tokens, v2 (full overhaul).
   Identity concept: refraction. One beam of light split into the site's two
   semantic wavelengths — amber (create) and blue (verify). Dark-first.
   Type: Schibsted Grotesk (display/body) + IBM Plex Mono (code/citation),
   both SIL OFL 1.1, self-hosted real files via Fontsource/jsDelivr; license
   texts at assets/fonts/OFL-SchibstedGrotesk.txt and LICENSE-IBMPlexMono.txt.
   Accent + ink values carried over unchanged from v1, where every pair was
   contrast-verified to WCAG AA in both themes. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGroteskVF.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces — deep, slightly blue-cast near-black (never pure #000) */
  --bg: #08090c;
  --bg-raised: #0e1015;
  --bg-raised-2: #151820;
  --fg: #eef0f3;
  --fg-muted: #9ba0ab;
  --fg-faint: #82868f;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* the two wavelengths: create (amber) / verify (blue) — verified values */
  --accent-create: #e2a33d;
  --accent-create-soft: rgba(226, 163, 61, 0.13);
  --accent-verify: #4f8cff;
  --accent-verify-soft: rgba(79, 140, 255, 0.13);
  /* ink variants: same hue used as TEXT. Dark passes AA vivid; light needs
     darkened ink (overrides below). */
  --accent-create-ink: var(--accent-create);
  --accent-verify-ink: var(--accent-verify);

  /* the beam: one light source dispersing into both accents */
  --beam: linear-gradient(90deg, transparent 0%, var(--accent-create) 30%, var(--accent-verify) 70%, transparent 100%);

  /* status */
  --ok: #4caf7d;
  --warn: #e2a33d;
  --danger: #e2593d;

  /* type */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 1.55rem + 4.6vw, 5.25rem);
  --text-headline: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  --text-title: 1.3rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;
  --text-mono: 0.9375rem;
  --text-mono-sm: 0.8125rem;

  /* radius — near-flat, technical */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;

  /* motion — the real impeccable.style curve, verified live via
     getComputedStyle on its shipped buttons */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 260ms;

  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5.5rem;

  /* layout */
  --container: 1180px;
  --container-wide: 1360px;
  --nav-height: 64px;

  /* materiality */
  --grain-opacity: 0.03;
  --depth-highlight: rgba(255, 255, 255, 0.05);
  --depth-shadow: rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Light theme — explicit data-theme set pre-paint by the head script.
   All ink/faint values below were contrast-verified ≥ AA in v1. */
:root[data-theme="light"] {
  --bg: #f7f7f8;
  --bg-raised: #ffffff;
  --bg-raised-2: #ededf0;
  --fg: #16171b;
  --fg-muted: #54575e;
  --fg-faint: #63666d;
  --border: rgba(10, 15, 40, 0.1);
  --border-strong: rgba(10, 15, 40, 0.22);

  --accent-create-soft: rgba(226, 163, 61, 0.13);
  --accent-verify-soft: rgba(79, 140, 255, 0.1);
  --accent-create-ink: #8a5e15;
  --accent-verify-ink: #1552b8;

  --grain-opacity: 0.018;
  --depth-highlight: rgba(255, 255, 255, 0);
  --depth-shadow: rgba(20, 20, 35, 0.08);

  color-scheme: light;
}

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