/* ==========================================================================
   Taller HQ design tokens
   --------------------------------------------------------------------------
   Concept "Tablero": the dot is the atomic unit of the brand.
   - Light theme: a workshop pegboard by day. Light perforated board, small
     dark holes, ink pegs, orange accent pegs.
   - Dark theme: an LED dot-matrix panel by night. Near-black board, dim
     holes, glowing amber pegs.
   Same geometry, two personalities.

   Theme strategy: :root is light. Dark tokens are declared twice, once for
   the system preference (unless the visitor forced light) and once for the
   explicit [data-theme="dark"] override.

   Shape system (the only radii on the page):
   - Every interactive control is a full pill (--radius-pill): buttons,
     chips, segmented controls, the nav bar, toggles, badges, tag pills.
   - Panels and containers use --radius-panel (20px): popover, process
     display, empty state.
   - Slabs are square (--radius-slab: 0): the solid accent block stamped
     behind a word (hero headline, hovered project name).
   - Dots are circles. Nothing else gets a radius.

   Color rules:
   - One accent only. Never use --accent as small text on --bg; use
     --accent-ink for accent-colored text.
   - Accent backgrounds always carry --on-accent text.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Pegboard by day */
  --bg: #edeef0;
  --bg-raised: #f6f6f7;
  --ink: #0d0e10;
  --ink-2: #565963;
  --line: #d2d4d9;
  --hole: #c3c6cc;
  --peg: #0d0e10;
  --shadow-color: 13 14 16; /* rgb triplet for board and UI shadows */
  --accent: #ff5f15;
  --accent-ink: #b83a00; /* accent-colored text on --bg (4.9:1) */
  --on-accent: #0d0e10;
  --board-glow: 0; /* 0 = pegboard shading, 1 = LED halo */

  /* Derived surfaces */
  --nav-bg: color-mix(in oklab, var(--bg-raised) 72%, transparent);
  --nav-bg-scrolled: color-mix(in oklab, var(--bg-raised) 86%, transparent);
  --nav-bg-solid: color-mix(in oklab, var(--bg-raised) 97%, transparent);
  --hover-wash: color-mix(in oklab, var(--ink) 7%, transparent);
  --accent-hover: color-mix(in oklab, var(--accent) 86%, var(--ink));
  --shadow-soft: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 8px 24px -12px rgb(var(--shadow-color) / 0.18);
  --shadow-float: 0 2px 6px rgb(var(--shadow-color) / 0.08), 0 24px 48px -20px rgb(var(--shadow-color) / 0.35);

  /* Type */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.25rem, 12.2vw, 6.5rem);
  --fs-section: clamp(2.5rem, 5.6vw, 5.5rem);
  --fs-manifesto: clamp(1.9rem, 3.8vw, 3.6rem);
  --fs-project: clamp(2rem, 5.2vw, 4.75rem);
  --fs-lead: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);
  --fs-body: 1.0625rem; /* 17px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-mono: 0.75rem; /* 12px */
  --fs-mono-lg: 0.8125rem; /* 13px */

  --stretch-display: 118%;
  --stretch-title: 112%;
  --stretch-ui: 105%;
  --stretch-mono: 87.5%;

  --tracking-display: -0.045em;
  --tracking-title: -0.04em;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container: 1320px;
  --gutter: 16px;
  --section-pad: clamp(96px, 12vw, 176px);
  --nav-top: 12px;
  --nav-h: 56px;
  --scroll-offset: 88px;

  /* Shape */
  --radius-pill: 999px;
  --radius-panel: 20px;
  --radius-slab: 0;

  /* Board geometry for CSS dot patterns (mirrors the WebGL board) */
  --dot-grid: 18px;
  --dot-size: 2px; /* hole radius */

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-ui: 220ms;
  --dur-panel: 420ms;

  /* Layers */
  --z-board: 0;
  --z-content: 1;
  --z-nav: 40;
  --z-menu: 50;
  --z-nav-open: 60; /* nav while the menu is open, so its close button stays on top */
  --z-toast: 70;
  --z-skip: 80;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-hero: clamp(3.25rem, 8.4vw, 8.5rem);
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 48px;
  }
}

/* LED panel by night: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0b;
    --bg-raised: #141416;
    --ink: #f2f2f3;
    --ink-2: #9b9da6;
    --line: #242529;
    --hole: #1c1d21;
    --peg: #e8e8ea;
    --shadow-color: 0 0 0;
    --accent: #ff6a1f;
    --accent-ink: #ff8a4c;
    --on-accent: #0a0a0b;
    --board-glow: 1;
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 30px -12px rgb(0 0 0 / 0.7);
    --shadow-float: 0 2px 6px rgb(0 0 0 / 0.5), 0 24px 48px -20px rgb(0 0 0 / 0.9);
  }
}

/* LED panel by night: explicit override */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-raised: #141416;
  --ink: #f2f2f3;
  --ink-2: #9b9da6;
  --line: #242529;
  --hole: #1c1d21;
  --peg: #e8e8ea;
  --shadow-color: 0 0 0;
  --accent: #ff6a1f;
  --accent-ink: #ff8a4c;
  --on-accent: #0a0a0b;
  --board-glow: 1;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 30px -12px rgb(0 0 0 / 0.7);
  --shadow-float: 0 2px 6px rgb(0 0 0 / 0.5), 0 24px 48px -20px rgb(0 0 0 / 0.9);
}