/* DIBO — Sistema de tokens unificado
 * Sprint 0 — Saneamiento técnico CSS — 23 mayo 2026
 * Theming (3 temas) — junio 2026
 * Este archivo centraliza los tokens compartidos.
 */

:root {
  /* Paleta light-only para widgets nativos (popup de <datalist>, scrollbars,
     pickers) — evita que el SO en dark mode los pinte con chrome oscuro. */
  color-scheme: light;

  /* === TEMA (default = wellness green) ===
     Cuatro roles tematizables:
       --accent     → acento (logo mark, subrayado/barra del activo, fondo CTA)
       --ink-strong → tinta fuerte: headings, labels, item activo, énfasis (bold)
       --ink-body   → tinta cuerpo: párrafos en modo tinta graduada (≥7:1 sobre blanco)
       --mark       → chip/pastilla/hover de sidebar (pálido)
     Los temas extra viven en bloques html[data-theme="..."] al final. */
  --accent:     #8adb35;
  --ink-strong: #426d0b;        /* contraste sobre blanco ~6.1:1 (AA, headings + bold) */
  --ink-body:   #425328;        /* verde desaturado ~8.5:1 (AAA, ≥7:1 ✓) */
  --mark:       #eff9de;

  /* === COLORES — Marca (alias de transición) ===
     Mantenemos los nombres legacy (--gd, --pale, etc.) para no romper los
     200+ usos `var(--gd)` repartidos por la suite, pero apuntan a las vars
     de tema → auto-tematizan con data-theme sin tocar el resto del código. */
  --gd:            var(--ink-strong);    /* antes #2D5A0E — brand principal */
  --gm:            var(--ink-strong);    /* antes #3E7A1A — verde medio */
  --green:         var(--accent);        /* antes #5DC236 — vibrante */
  --green-vibrant: var(--accent);        /* antes #7EC142 — splash */
  --pale:          var(--mark);          /* antes #EAF3DE — fondo suave */
  --pale-border:   var(--ink-strong);    /* antes #C0DD97 — solo se usa en bordes finos */
  --pale-border-2: var(--border);        /* antes #D4E4C8 — borde sutil */

  /* Verdes con alpha (basados en --gd) — se quedan en el verde wellness
     incluso bajo otros temas. Son hovers casi imperceptibles; un cambio
     de matiz aquí no aporta. Lo dejamos así para mantener simple el sistema. */
  --gd-06: rgba(45, 90, 14, 0.06);
  --gd-08: rgba(45, 90, 14, 0.08);
  --gd-13: rgba(45, 90, 14, 0.13);
  --gd-19: rgba(45, 90, 14, 0.19);
  --gd-25: rgba(45, 90, 14, 0.25);

  /* === COLORES — Fondos === */
  --bg: #FAF9F5;
  --bg-card: #F5F4F1;
  --bg-white: #FFFFFF;
  --bg-subtle: var(--mark);                 /* alias — antes #EAF3DE */
  --bg-overlay-dark: #0F1A0A;

  /* === COLORES — Texto === */
  --text:  #1a1a18;       /* cuerpo del documento — NO tematizar */
  --text2: #5f5e5a;
  --text3: #888780;

  /* === COLORES — Bordes === */
  --border:  #E8E6E0;
  --border2: #D4D2CC;

  /* === COLORES — Estado (semánticos — NO tematizar) === */
  --warn:  #EC7C18;
  --error: #CA0E0E;
  --info:  #4FB2FF;

  /* === TIPOGRAFÍA === */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, "Times New Roman", serif;

  /* === RADIOS === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* === SOMBRAS === */
  --shadow-card:  0 2px 16px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 24px rgba(0,0,0,.10);

  /* === Z-INDEX === */
  --z-nav: 200;
  --z-modal: 1000;
  --z-overlay: 999;

  /* === NAV === */
  --nav-h: 36px;
}

/* === TEMA: Boli (tinta fría — azul/violeta + acento rosa) === */
html[data-theme="boli"] {
  --accent:     #ea5785;        /* rosa solo como acento puntual */
  --ink-strong: #4629a7;        /* violeta — headings/labels + bold (~9.7:1 ✓) */
  --ink-body:   #3A4870;        /* azul desaturado desde #3050aa (~9.0:1 ✓) */
  --mark:       #e1ebff;
}

/* === TEMA: Carbon (grafito neutro + acento verde) === */
html[data-theme="carbon"] {
  --accent:     #8adb35;
  --ink-strong: #2E2E2E;        /* grafito más oscuro + bold (~13.5:1 ✓) */
  --ink-body:   #565656;        /* grafito cuerpo (~7.4:1 ✓ — justo encima del umbral) */
  --mark:       #f7f7f7;
}

/* Utilidad global — sustituye style="display:none" inline (Sprint 0 prompt 4.1).
   Sin !important para que JS pueda mostrar via element.style.display='...'. */
.is-hidden { display: none; }