/* =========================================================
   Tokens v2: fuente de verdad en docs/sistema-de-diseno.md
   Los componentes usan SOLO estas variables.
   ========================================================= */

:root {
  /* Color */
  --ink:           #0E1116;
  --text:          #2B2F36;
  --muted:         #6A707A;
  --line:          #DADDE2;
  --bg:            #FAFAF8;
  --bg-alt:        #F1F0EC;
  --surface:       #FFFFFF;
  --primary:       #043565;
  --primary-hover: #022347;
  --on-primary:    #FFFFFF;
  --focus-ring:    0 0 0 3px rgba(4, 53, 101, .35);

  /* Tipografía */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* solo H1 del hero y de cada caso */
  --font-body:    "Instrument Sans", system-ui, sans-serif;

  --text-h1:      clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --text-h1-case: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --text-h2:      clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --text-h3:      1.25rem;
  --text-body:    1.0625rem;
  --text-small:   .9375rem;
  --leading-body: 1.6;
  --leading-tight: 1.04;
  --tracking-h1:  -0.03em;
  --measure:      62ch;

  /* Espacio y layout */
  --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;
  --container: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 7vw, 6.5rem);
  --tap: 44px;

  /* Forma y movimiento */
  --radius-sm: 4px;      /* botones e inputs */
  --radius-md: 6px;      /* imágenes */
  --radius-pill: 999px;  /* solo el toggle de tema */
  --shadow-hover: 0 12px 32px -16px rgba(0, 0, 0, .18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;

  color-scheme: light;
}

/* ---------- Modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:           #F1F1EE;
    --text:          #CFD2D6;
    --muted:         #8D939C;
    --line:          #2A2E35;
    --bg:            #111315;
    --bg-alt:        #181B1F;
    --surface:       #181B1F;
    --primary:       #8DB6E8;
    --primary-hover: #B4D0F2;
    --on-primary:    #111315;
    --focus-ring:    0 0 0 3px rgba(141, 182, 232, .45);
    --shadow-hover:  0 12px 32px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink:           #F1F1EE;
  --text:          #CFD2D6;
  --muted:         #8D939C;
  --line:          #2A2E35;
  --bg:            #111315;
  --bg-alt:        #181B1F;
  --surface:       #181B1F;
  --primary:       #8DB6E8;
  --primary-hover: #B4D0F2;
  --on-primary:    #111315;
  --focus-ring:    0 0 0 3px rgba(141, 182, 232, .45);
  --shadow-hover:  0 12px 32px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}