/* holismo-Med — tokens de diseño
   Fuentes autoalojadas en /public/fonts (woff2):
   Literata 500/600 (titulares y logotipo) · Atkinson Hyperlegible 400/700 (interfaz y cuerpo). */

:root {
  /* Paleta base */
  --niebla:   #F4F7F4;   /* fondo de página */
  --papel:    #FFFFFF;   /* superficies elevadas: tarjetas de opción, paneles */
  --abeto:    #16302A;   /* texto principal */
  --musgo:    #4A6560;   /* texto secundario, ayudas */
  --verdin:   #1F6F63;   /* color primario: acciones, foco, anillo del logo */
  --verdin-2: #175A50;   /* primario en hover/active */
  --salvia:   #B7CFC5;   /* bordes, separadores, progreso vacío */
  --salvia-2: #E3EDE8;   /* fondo de opción seleccionada, filas alternas */
  --ambar:    #C98A2E;   /* acento: punto del logo, progreso completado, badges de estado */
  --arcilla:  #A8443B;   /* error */
  --arcilla-2:#F6E7E5;   /* fondo de error */

  /* Semánticos */
  --bg: var(--niebla);
  --surface: var(--papel);
  --ink: var(--abeto);
  --ink-2: var(--musgo);
  --primary: var(--verdin);
  --primary-hover: var(--verdin-2);
  --border: var(--salvia);
  --selected-bg: var(--salvia-2);
  --accent: var(--ambar);
  --danger: var(--arcilla);
  --danger-bg: var(--arcilla-2);
  --focus: var(--verdin);

  /* Tipografía */
  --font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --fs-0: 0.875rem;  /* 14 · ayudas, meta */
  --fs-1: 1rem;      /* 16 · cuerpo, opciones */
  --fs-2: 1.125rem;  /* 18 · enunciado de pregunta */
  --fs-3: 1.5rem;    /* 24 · título de página del formulario */
  --fs-4: 2rem;      /* 32 · título de campaña, panel */
  --lh-body: 1.5;
  --lh-display: 1.2;

  /* Espaciado (base 4) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Radios: jerarquía explícita */
  --r-control: 6px;   /* inputs, botones */
  --r-card: 10px;     /* tarjetas de opción */
  --r-panel: 14px;    /* paneles del admin */

  --content-max: 40rem; /* ~70 caracteres a 16 px */
  --tap-min: 48px;      /* objetivo táctil mínimo */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101C19;
    --surface: #172622;
    --ink: #E8EFEA;
    --ink-2: #A5B8B1;
    --primary: #5FB3A2;
    --primary-hover: #7CC5B6;
    --border: #2C4A42;
    --selected-bg: #1E3A33;
    --accent: #E0A24A;
    --danger: #E08078;
    --danger-bg: #3A2320;
    --focus: #7CC5B6;
  }
}
:root[data-theme="dark"] {
  --bg: #101C19; --surface: #172622; --ink: #E8EFEA; --ink-2: #A5B8B1;
  --primary: #5FB3A2; --primary-hover: #7CC5B6; --border: #2C4A42; --selected-bg: #1E3A33;
  --accent: #E0A24A; --danger: #E08078; --danger-bg: #3A2320; --focus: #7CC5B6;
}

/* Reglas de uso
   - Fondo de página siempre --bg; nunca blanco puro a pantalla completa.
   - Un solo elemento de acento por pantalla (progreso o estado), en --accent.
   - Foco visible: outline 3px solid var(--focus), offset 2px, en todo control.
   - Sin sombras difusas: la elevación se expresa con --surface sobre --bg y borde --border.
   - Texto de ayuda en --ink-2 y --fs-0; enunciados en --fs-2 y --ink.
   - prefers-reduced-motion: desactivar transiciones de progreso y de tarjetas. */