/* @recoil/design-system — tokens.css
 * Single source of truth for CSS variables, density modes, contrast modes,
 * aspect ratio classes, and global focus styles. Per Law 5, NO other file
 * may declare the CSS aspect property outside this file (verify-laws enforces).
 */
@import "@fontsource/inter/latin-400.css";
@import "@fontsource/inter/latin-500.css";
@import "@fontsource/jetbrains-mono/latin-400.css";
@import "@fontsource/jetbrains-mono/latin-500.css";

:root {
  /* Surfaces — near-black, slightly cool */
  --bg-0: #0a0b0e; /* deepest — gutters between panels */
  --bg-1: #101218; /* primary panel bg */
  --bg-2: #161922; /* row default */
  --bg-3: #1c2029; /* row hover / raised */
  --bg-4: #232834; /* selected / focus */
  --bg-5: #2d3340; /* heavy raised (tooltip, palette) */

  /* Borders — hairline */
  --border-1: #1f232c; /* faint divider */
  --border-2: #2a2f3a; /* default border */
  --border-3: #3a4150; /* emphasized */

  /* Text */
  --fg-0: #e8eaef; /* highest */
  --fg-1: #d3d7df; /* default — was #c5c9d1, bumped for body text */
  --fg-2: #a8adb8; /* secondary / labels — was #8b909c */
  --fg-3: #969aa6; /* tertiary / dim — was #5e6371 (2.3:1), bumped 2026-05-11 */
  --fg-4: #7e8390; /* placeholder / disabled — was #3f4350 (1.4:1) */

  /* Accent — single cool blue, hue-rotatable */
  --accent-hue: 250;
  --accent: oklch(0.72 0.16 var(--accent-hue));
  --accent-bg: oklch(0.72 0.16 var(--accent-hue) / 0.14);
  --accent-fg: oklch(0.85 0.12 var(--accent-hue));
  --accent-line: oklch(0.55 0.16 var(--accent-hue));

  /* Semantic — eval / status states */
  --pass: oklch(0.78 0.16 145);
  --pass-bg: oklch(0.78 0.16 145 / 0.13);
  --pending: oklch(0.8 0.16 78);
  --pending-bg: oklch(0.8 0.16 78 / 0.13);
  --fail: oklch(0.7 0.2 22);
  --fail-bg: oklch(0.7 0.2 22 / 0.14);
  --skip: #5e6371;
  --skip-bg: rgba(94, 99, 113, 0.14);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Border-radius scale (--r runtime tunable via Tweaks; range 0–8px) */
  --r-sm: 3px;
  --r: 5px;
  --r-md: 7px;

  /* Shadows */
  --shadow-1:
    0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-3);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss02", "tnum", "zero";
}
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Aspect-ratio classes (Law 5: single home) ───────────────────── */
.aspect-9-16 {
  aspect-ratio: 9 / 16;
}
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}
.aspect-1-1 {
  aspect-ratio: 1 / 1;
}
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* ── Tweak: density ──────────────────────────────────────────────── */
#app[data-density="dense"] {
  --d-row: 20px;
  --d-pad: 8px;
  --d-stage-pad: 12px;
  --d-take-pad: 4px 6px;
  --d-card-gap: 8px;
  --d-fs-bump: -0.5px;
}
#app[data-density="normal"] {
  --d-row: 22px;
  --d-pad: 10px;
  --d-stage-pad: 16px;
  --d-take-pad: 6px 8px;
  --d-card-gap: 12px;
  --d-fs-bump: 0px;
}
#app[data-density="spacious"] {
  --d-row: 26px;
  --d-pad: 14px;
  --d-stage-pad: 22px;
  --d-take-pad: 9px 11px;
  --d-card-gap: 16px;
  --d-fs-bump: 0.5px;
}

/* ── Tweak: contrast levels ──────────────────────────────────────── */
#app[data-contrast="2-step"] {
  --bg-2: #101218;
  --bg-3: #161922;
}
#app[data-contrast="flat"] {
  --bg-1: #0e1016;
  --bg-2: #0e1016;
  --bg-3: #14171f;
  --bg-4: #1a1e28;
}

/* ── Global focus ring (Law-compliant a11y baseline) ─────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}