/* ==========================================================================
   Tokens · "Del nudo a la línea"
   Escenario de referencia 1600 × 900 (se escala); fondos fotográficos a sangre en cualquier proporción.
   Temas: noche (marca, por defecto) · laboratorio (grafito + menta) · claro (salas iluminadas).
   ========================================================================== */

@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: block; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --margin: 80px; --gutter: 24px;

  --t-display: 132px; --t-h1: 92px; --t-h2: 64px; --t-h3: 38px;
  --t-lede: 34px; --t-body: 28px; --t-small: 23px; --t-label: 20px;
  --lh-tight: 0.94; --lh-title: 1.0; --lh-body: 1.42;

  --r-1: 6px; --r-2: 10px; --r-3: 16px; --radius-card: 26px;
  --hair: 1px;

  --d-instant: 150ms; --d-local: 240ms; --d-reveal: 480ms; --d-scene: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --theme-fade: 360ms;

  --font-display: "Bricolage", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --display-weight: 800;
  --display-stretch: 88%;
  --display-track: -0.035em;
}

/* ---------- Noche andina (por defecto) ---------- */
:root, [data-theme="noche"] {
  --background: #07101f;
  --background-2: #0c1a33;
  --surface: rgb(12 26 51 / 0.72);
  --surface-solid: #0f2140;
  --surface-elevated: rgb(20 40 78 / 0.78);
  --text-primary: #f6f2ea;
  --text-secondary: #c9d2e3;
  --text-muted: #93a1bb;
  --accent: #f0c46a;
  --accent-strong: #ffd98c;
  --accent-contrast: #1a1204;
  --accent-2: #8fb4ff;
  --thread: #e8b85c;
  --border: rgb(214 226 255 / 0.14);
  --border-strong: rgb(214 226 255 / 0.3);
  --focus-ring: #ffd98c;
  --glow: 0 0 0 1px rgb(240 196 106 / 0.35), 0 12px 48px -8px rgb(240 196 106 / 0.45);
  --shadow-card: 0 30px 80px -30px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.07);
  --scrim: 7 16 31;
  --glass-blur: 20px;
  --grain-opacity: 0.06;
  --ok: #53e0a6; --warn: #ffb44d; --risk: #ff7d6e;
  color-scheme: dark;
}

/* ---------- Laboratorio: grafito y menta ---------- */
[data-theme="laboratorio"] {
  --background: #0d1113;
  --background-2: #151b1e;
  --surface: rgb(24 31 35 / 0.74);
  --surface-solid: #1a2226;
  --surface-elevated: rgb(34 44 49 / 0.82);
  --text-primary: #eef6f3;
  --text-secondary: #c2d1cc;
  --text-muted: #8ea39c;
  --accent: #6ff0c4;
  --accent-strong: #a4ffe0;
  --accent-contrast: #04140e;
  --accent-2: #ffb07a;
  --thread: #8ff7d2;
  --border: rgb(200 240 226 / 0.13);
  --border-strong: rgb(200 240 226 / 0.3);
  --focus-ring: #a4ffe0;
  --glow: 0 0 0 1px rgb(111 240 196 / 0.35), 0 12px 48px -8px rgb(111 240 196 / 0.4);
  --shadow-card: 0 30px 80px -30px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.06);
  --scrim: 13 17 19;
  --glass-blur: 18px;
  --grain-opacity: 0.07;
  --ok: #6ff0c4; --warn: #ffc166; --risk: #ff8a7a;
  color-scheme: dark;
}

/* ---------- Institucional claro (salas con mucha luz) ---------- */
[data-theme="claro"] {
  --background: #eef2f8;
  --background-2: #e2e9f4;
  --surface: rgb(255 255 255 / 0.8);
  --surface-solid: #ffffff;
  --surface-elevated: rgb(255 255 255 / 0.92);
  --text-primary: #0b1f45;
  --text-secondary: #2c4270;
  --text-muted: #56688d;
  --accent: #1d52d4;
  --accent-strong: #1543b0;
  --accent-contrast: #ffffff;
  --accent-2: #a8741a;
  --thread: #c8912d;
  --border: rgb(11 31 69 / 0.12);
  --border-strong: rgb(11 31 69 / 0.28);
  --focus-ring: #1d52d4;
  --glow: 0 0 0 1px rgb(29 82 212 / 0.3), 0 12px 40px -10px rgb(29 82 212 / 0.35);
  --shadow-card: 0 24px 60px -28px rgb(11 31 69 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.9);
  --scrim: 238 242 248;
  --glass-blur: 16px;
  --grain-opacity: 0.035;
  --ok: #0f7a4d; --warn: #9a5a06; --risk: #b42318;
  color-scheme: light;
}