/*
 * Design tokens only (no component styles).
 * Colors mirror js/engine/palette.js, the single source of truth: js/main.js calls
 * IAD.engine.palette.applyCssVars() at boot, so edits there win at runtime.
 * tools/tests/palette.test.mjs fails if this static mirror drifts from the palette.
 * Fonts are self-hosted (SIL Open Font License; license texts in assets/fonts/).
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Variable weight 400–800; optical size 72, softness 50 and "wonky" letters pinned at build time. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("../assets/fonts/patrick-hand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Warm palette: "aula y territorio" ─────────────────────────────── */
  --paper: #F3EAD7;
  --paper-shade: #E7D9BD;
  --paper-edge: #D9C7A3;
  --cream: #FBF6EA;
  --ink: #2A211B;
  --ink-soft: #5B4B3F;
  --chalkboard: #2F4B3E;
  --chalkboard-deep: #233A30;
  --chalk: #F2F0E6;
  --terracotta: #B45F3D;
  --terracotta-light: #D99877;
  --andean: #5E7F45;
  --andean-deep: #3F5E33;
  --andean-light: #A3BC72;
  --ochre: #CC9A3E;
  --ochre-light: #E8C67E;
  --river: #4B7E9C;
  --river-light: #9CC3D6;
  --wood: #8A5D3B;
  --wood-light: #B98A5E;
  --sky: #D3E3E6;
  --red-pen: #C0262D;

  /* ── Cool palette: "máquina" (only where the AI appears) ───────────── */
  --cool-navy: #0F1B33;
  --cool-navy-deep: #0A1326;
  --cool-navy-light: #1A2B4D;
  --cool-line: #A9C7EC;
  --cool-line-dim: #56739E;
  --cool-glow-green: #5CF0A8;
  --cool-glow-magenta: #F25FC6;
  --cool-text: #DCE9F8;

  /* ── The 4 parts of an instruction (never reused for other meanings) ─
     -ink: same hue, ≥ 4.5:1 on --paper (use it for text); -wash: pale tint for chips. */
  --part-rol: #D55E00;
  --part-rol-ink: #AC4C00;
  --part-rol-wash: #F7E8DC;
  --part-contexto: #E69F00;
  --part-contexto-ink: #8A6000;
  --part-contexto-wash: #F4E9CF;
  --part-tarea: #009E73;
  --part-tarea-ink: #007757;
  --part-tarea-wash: #CBF3E8;
  --part-formato: #0072B2;
  --part-formato-ink: #006DAA;
  --part-formato-wash: #DCEDF7;

  /* ── Student-video legends ─────────────────────────────────────────── */
  --legend-evaporacion: #CC79A7;
  --legend-condensacion: #56B4E9;
  --legend-precipitacion: #3B4F8F;
  --legend-escorrentia: #7A5634;

  /* ── People ────────────────────────────────────────────────────────── */
  --skin-1: #F3D5BC;
  --skin-2: #E6B992;
  --skin-3: #CF9A6E;
  --skin-4: #B07A50;
  --skin-5: #8A5A3A;
  --skin-6: #5E3B25;
  --hair-1: #1E1611;
  --hair-2: #3A2416;
  --hair-3: #5C3A22;
  --hair-4: #8A5A33;
  --hair-5: #B9B4AC;
  --hair-6: #E0D2B4;
  --cloth-white: #F6F3EA;
  --cloth-navy: #2F3E5C;
  --cloth-gray: #7D838C;
  --cloth-green: #4F6E52;
  --cloth-maroon: #7A3B3F;
  --cloth-mustard: #C9A24A;
  --cloth-denim: #4F6D8F;
  --cloth-terracotta: #B45F3D;

  /* ── Font stacks (also IAD.engine.ink.FONTS) ───────────────────────── */
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-hand: "Patrick Hand", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  /* ── Type scale (body text never below 18 px) ──────────────────────── */
  --fs-note: 1rem;                                          /* 16 px: footnotes only */
  --fs-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);   /* 18 → 21 px */
  --fs-lead: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);       /* 20 → 24 px */
  --fs-kicker: 1.125rem;                                    /* 18 px */
  --fs-hand: clamp(1.25rem, 1.14rem + 0.5vw, 1.5625rem);    /* margin notes */
  --fs-h4: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --fs-h3: clamp(1.4375rem, 1.27rem + 0.75vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.44rem + 1.4vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.66rem + 2.6vw, 4rem);
  --fs-presenter: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); /* "Modo clase": ≥ 28 px */
  --lh-body: 1.6;
  --lh-snug: 1.3;
  --lh-heading: 1.15;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-heading: 650;
  --measure: 68ch;

  /* ── Spacing (rem; 1rem = 16 px) ───────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --content-max: 72rem;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Ink, riso and interaction ─────────────────────────────────────── */
  --line-thin: 1px;
  --line: 2px;
  --line-bold: 3px;
  --riso-x: 1.5px;          /* color-layer misregistration, as IAD.engine.ink.RISO */
  --riso-y: 1px;
  --riso-shadow-x: 5px;     /* offset riso shadow behind cards */
  --riso-shadow-y: 6px;
  --touch-min: 44px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-color: #2A211B;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layers ────────────────────────────────────────────────────────── */
  --z-nav: 50;
  --z-overlay: 80;
  --z-presenter: 100;
}