/* tokens.css — variables de diseño de Palma (plan §7; PRODUCT.md).
   Una sola fuente de verdad para las cuatro superficies. Sin fuentes ni recursos externos.

   Orden de capas de todo el sistema (se declara aquí porque tokens.css se carga primero):
   reset < base < components < layout < utilities. */
@layer reset, base, components, layout, utilities;

/* ---------- Tema claro (por defecto) ----------
   Neutros con ligero tinte azul petróleo (sin negro ni blanco puros).
   Contrastes medidos (WCAG 2.x) en el informe de T36 y en la página /dev/components.html. */
:root {
  color-scheme: light dark;

  /* Superficies y bordes */
  --bg: #eff4f5;              /* fondo de página */
  --surface: #fafcfc;         /* tarjetas, campos, diálogos */
  --sunken: #e4ecee;          /* zonas hundidas: encabezado de tabla, esqueletos */
  --border: #c5d2d7;          /* separadores decorativos */
  --border-strong: #6b818b;   /* borde de campos y controles (≥ 3:1) */
  --logo-surface: #fafcfc;    /* superficie neutra fija para logos y vistas previas */
  --logo-border: #c5d2d7;

  /* Texto */
  --text: #13242b;            /* 15,8:1 sobre --surface */
  --muted: #43565f;           /* texto secundario, ≥ 4,5:1 */

  /* Acento azul petróleo: dos tonos por tema */
  --accent: #0d6677;          /* tono 1: relleno de botón primario, bordes de componentes (≥ 3:1) */
  --accent-strong: #0b5a69;   /* tono 2: texto, enlaces y foco (≥ 4,5:1) */
  --accent-hover: #084552;    /* botón primario en hover/presionado */
  --on-accent: #fafcfc;       /* texto sobre el relleno --accent */
  --accent-bg: #dceef1;       /* fondo suave: selección, fila activa */
  --focus: #0b5a69;           /* anillo de foco de 3 px (≥ 3:1) */

  /* Peligro (botón destructivo) */
  --danger: #a12a2a;
  --danger-hover: #7f1f1f;
  --on-danger: #fafcfc;

  /* Estados: texto/icono, fondo, borde (siempre con icono y texto) */
  --ok: #1b6b3a;      --ok-bg: #e1f1e6;      --ok-bd: #4f9468;
  --warn: #7a4a00;    --warn-bg: #fbefd2;    --warn-bd: #b27a12;
  --err: #a12a2a;     --err-bg: #fae4e2;     --err-bd: #c0544f;
  --info: #1e5a8c;    --info-bg: #e0edf8;    --info-bd: #4f88b5;

  --overlay: rgb(10 18 21 / 0.55);
  --shadow-1: 0 1px 2px rgb(19 36 43 / 0.08), 0 1px 3px rgb(19 36 43 / 0.06);
  --shadow-2: 0 12px 32px -8px rgb(19 36 43 / 0.28), 0 4px 10px -4px rgb(19 36 43 / 0.14);
}

/* ---------- Tema claro elegido a mano (RF-229): fija los controles nativos aunque el dispositivo sea oscuro ---------- */
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Tema oscuro (RF-229, D-83) ----------
   Dos selectores con las MISMAS declaraciones: elección manual y preferencia del dispositivo sin elección.
   Una prueba (tests/web/theme.test.mjs) falla si dejan de coincidir: cámbialos siempre a la vez. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e181c;
  --surface: #15242a;
  --sunken: #0a1215;
  --border: #2b3f47;
  --border-strong: #6f8a95;
  --logo-surface: #fafcfc;   /* igual en ambos temas: el logo se ve sea claro u oscuro */
  --logo-border: #c5d2d7;

  --text: #e2ebee;
  --muted: #9fb2ba;

  --accent: #5dbfd1;
  --accent-strong: #6ccadb;
  --accent-hover: #7bd0df;
  --on-accent: #071317;
  --accent-bg: #12343c;
  --focus: #7bd0df;

  --danger: #e57f78;
  --danger-hover: #f19a94;
  --on-danger: #1b0706;

  --ok: #78cc93;      --ok-bg: #12301d;      --ok-bd: #3e8f5b;
  --warn: #edb84f;    --warn-bg: #35280a;    --warn-bd: #a97a1c;
  --err: #f19a94;     --err-bg: #3a1816;     --err-bd: #b2504a;
  --info: #8dbfea;    --info-bg: #122c42;    --info-bd: #4e86b4;

  --overlay: rgb(2 6 8 / 0.7);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-2: 0 12px 32px -8px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e181c;
    --surface: #15242a;
    --sunken: #0a1215;
    --border: #2b3f47;
    --border-strong: #6f8a95;
    --logo-surface: #fafcfc;   /* igual en ambos temas: el logo se ve sea claro u oscuro */
    --logo-border: #c5d2d7;

    --text: #e2ebee;
    --muted: #9fb2ba;

    --accent: #5dbfd1;
    --accent-strong: #6ccadb;
    --accent-hover: #7bd0df;
    --on-accent: #071317;
    --accent-bg: #12343c;
    --focus: #7bd0df;

    --danger: #e57f78;
    --danger-hover: #f19a94;
    --on-danger: #1b0706;

    --ok: #78cc93;      --ok-bg: #12301d;      --ok-bd: #3e8f5b;
    --warn: #edb84f;    --warn-bg: #35280a;    --warn-bd: #a97a1c;
    --err: #f19a94;     --err-bg: #3a1816;     --err-bd: #b2504a;
    --info: #8dbfea;    --info-bg: #122c42;    --info-bd: #4e86b4;

    --overlay: rgb(2 6 8 / 0.7);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-2: 0 12px 32px -8px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
  }
}

/* ---------- Escala, espaciado, radios, foco (independientes del tema) ---------- */
:root {
  /* Tipografía del sistema, sin fuentes externas */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;

  /* Tamaños por puntero (principio 8). Base = táctil. */
  --target: 3.5rem;          /* 56 px: alto mínimo de botones, campos, filas de acción */
  --font-base: 1.125rem;     /* 18 px */
  --gap-min: 0.5rem;         /* 8 px: separación mínima entre objetivos */

  /* Escala tipográfica (múltiplos de la base; ninguna letra baja de la base) */
  --text-base: var(--font-base);
  --text-lg: calc(var(--font-base) * 1.125);   /* 20,25 px táctil / 18 px mouse */
  /* Títulos fluidos (T58, D-90): crecen con el ancho de la pantalla; la letra de datos y controles sigue en la base (RNF-9).
     h1 ≈ 22 px a 390 px y ≈ 30 px a 1280 px. Los valores van en rem a propósito: respetan el tamaño de letra del usuario. */
  --text-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);      /* subtítulos (h2) */
  --text-2xl: clamp(1.375rem, 1.05rem + 1.4vw, 1.9rem);   /* título de página (h1) */
  --text-3xl: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);     /* nombre del negocio en el ingreso (≥ 1,25 × la base, RF-231) */
  --text-brand: calc(var(--font-base) * 1.35);            /* nombre del negocio y hora del encabezado: fijo, 1,35 × la base (RF-231; T56/T57) */
  --leading-body: 1.4;
  --leading-heading: 1.25;
  --measure: 70ch;

  /* Espaciado (rem: escala con el zoom) */
  --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;

  /* Espacio vertical de página (T58): menos aire arriba y abajo en el celular, el de siempre en escritorio */
  --page-pad-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  --page-pad-bottom: clamp(2rem, 1.2rem + 2.5vw, 4rem);

  --radius-1: 0.375rem;   /* campos, botones, insignias */
  --radius-2: 0.625rem;   /* tarjetas, diálogos, tablas */

  /* Logos (D-96): caja del encabezado (celular / desde 48rem) y alto del logo del pie */
  --logo-header-h: 3rem;     /* 48 px */
  --logo-header-w: 7.5rem;   /* 120 px */
  --logo-credit-h: 2.5rem;   /* 40 px */
  --logo-credit-w: 10rem;    /* 160 px */

  --focus-width: 3px;
  --focus-offset: 2px;

  --transition: 120ms cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out exponencial, solo diálogo/menú/presionado */
}

@media (min-width: 48rem) {
  :root { --logo-header-h: 3.5rem; --logo-header-w: 12.5rem; }   /* 56 x 200 px */
}

/* Mouse puro (sin pantalla táctil en ningún dispositivo): baja a 44 px y 16 px.
   Un portátil con pantalla táctil recibe los tamaños grandes (any-pointer: coarse). */
@media (pointer: fine) and (not (any-pointer: coarse)) {
  :root {
    --target: 2.75rem;     /* 44 px */
    --font-base: 1rem;     /* 16 px */
  }
}

/* Sin movimiento si el usuario lo pide: ninguna transición ni animación */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}