/* =========================================================
   Justina · tokens de diseño
   ---------------------------------------------------------
   Toda decisión visual sale de acá. Los componentes usan
   SOLO var(--…): si falta un valor, se agrega acá primero
   (y se documenta en web/ESTILO.md).

   Temas: "dia" (por defecto) y "noche". El atributo
   data-tema lo pone un script en el <head> antes de pintar.
   ========================================================= */

:root {
  /* ---------- Paleta cruda ----------
     Verdes "tipo Planta" + acentos de la naturaleza.
     En componentes preferir los tokens semánticos de abajo. */
  --verde-50: #f1f8e8;
  --verde-100: #ddf0c9;
  --verde-200: #c0e39e;
  --verde-300: #9fd373;
  --verde-400: #78c850; /* el verde tipo Planta */
  --verde-500: #57a93a;
  --verde-600: #408a2c;
  --verde-700: #306b24;
  --verde-800: #23501d;
  --verde-900: #173616;

  --crema-50: #fffdf5;
  --crema-100: #f6f2e1;
  --crema-200: #ebe4c9;
  --crema-300: #d9cfab;

  --sol-300: #fce38a;
  --sol-500: #f4c430;
  --flor-300: #f6b3cc;
  --flor-500: #e0679a;
  --baya-500: #dc4a3d;
  --baya-600: #c03a2f;
  --rocio-300: #a8e3f6;
  --rocio-500: #36b0de;
  --terracota-400: #d27a45;
  --terracota-600: #a3552b;
  --corteza-500: #9a7a4e;

  /* Contorno del pixel art: igual en día y noche. */
  --pixel-trazo: #1c2a1b;

  /* ---------- Tipos ----------
     Cada tipo tiene un fondo (texto blanco encima ≥ 4.5:1)
     y un "claro" para íconos, acentos y hábitats. */
  --tipo-planta: #3a7f28;
  --tipo-planta-claro: #78c850;
  --tipo-veneno: #8a3f9e;
  --tipo-veneno-claro: #c77ddb;
  --tipo-agua: #2f6fc0;
  --tipo-agua-claro: #7fb3f0;
  --tipo-fuego: #c4501e;
  --tipo-fuego-claro: #f59a5c;
  --tipo-roca: #806b2a;
  --tipo-roca-claro: #cdb66a;
  --tipo-siniestro: #4e4038;
  --tipo-siniestro-claro: #9c8878;
  --tipo-hada: #b8457a;
  --tipo-hada-claro: #f2a3c6;
  --tipo-volador: #6a5fc0;
  --tipo-volador-claro: #b1a8f0;
  --tipo-bicho: #66760f;
  --tipo-bicho-claro: #b6c94a;
  --tipo-hielo: #237a85;
  --tipo-hielo-claro: #8ad8e0;
  --tipo-tierra: #9a6a2c;
  --tipo-tierra-claro: #dcb176;
  --tipo-normal: #6e6a58;
  --tipo-normal-claro: #b8b39c;

  /* ---------- Semánticos · tema Día ---------- */
  color-scheme: light;
  --color-fondo: var(--crema-100);
  --color-fondo-punto: var(--crema-200);
  --color-superficie: var(--crema-50);
  --color-superficie-alt: var(--verde-50);
  --color-tinta: #1c2a1b;
  --color-tinta-suave: #56654f;
  --color-acento-texto: var(--verde-700);
  --color-trazo: #22381f;
  --color-sombra: #22381f;
  --color-separador: var(--crema-200);
  --color-enlace: var(--verde-700);
  --color-foco: var(--sol-500);
  --color-seleccion: var(--verde-200);

  /* El aparato (cabecera). Texto blanco encima ≥ 4.5:1. */
  --color-carcasa: #2e852a;
  --color-carcasa-luz: #5cbf4a;
  --color-carcasa-sombra: #1f5e1c;

  /* Pantalla LCD (entrada de la ficha) */
  --color-pantalla: #203d22;
  --color-pantalla-tinta: #d4f5b4;
  --color-pantalla-brillo: #2d5530;

  /* Hábitat y plataforma de los sprites */
  --color-habitat-1: var(--verde-100);
  --color-habitat-2: var(--verde-300);
  --color-plataforma: var(--verde-400);
  --color-plataforma-borde: var(--verde-600);
  --color-silueta: rgb(34 56 31 / 0.82);

  /* Barra de PS (estado) */
  --color-ps-alto: #3cc462;
  --color-ps-medio: #f4c430;
  --color-ps-bajo: #e5483a;
  --color-ps-pista: #dde5d4;
  --color-ps-marco: #2b3a2a;
  --color-ps-rotulo: #f7b733;

  /* Pestañas de panel y chips */
  --color-pestana: var(--verde-400);
  --color-pestana-tinta: var(--verde-900);
  --color-pronto: var(--verde-100);
  --color-pronto-tinta: var(--verde-900);
  --color-hoy: var(--sol-500);
  --color-hoy-tinta: #3b2b00;
  --color-vencida: var(--baya-600);
  --color-vencida-tinta: #fff;

  /* Resaltado de palabras dentro de los diálogos */
  --color-resaltado-info: rgb(120 200 80 / 0.45);
  --color-resaltado-alerta: rgb(244 196 48 / 0.55);
  --color-resaltado-peligro: rgb(224 103 154 / 0.4);

  /* Hierba alta del pie */
  --color-hierba-atras: var(--verde-500);
  --color-hierba-frente: var(--verde-700);

  /* Estadísticas */
  --stat-luz: var(--sol-500);
  --stat-riego: #3f86d9;
  --stat-humedad: var(--rocio-500);
  --stat-crecimiento: var(--verde-500);
  --stat-resistencia: var(--corteza-500);
  --stat-vacio: var(--crema-200);

  /* ---------- Tipografía ----------
     Nunito para leer; Tiny5 (pixel) solo para rótulos cortos,
     números y la marca. */
  --fuente-texto: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --fuente-pixel: "Tiny5", ui-monospace, "Cascadia Mono", monospace;
  --texto-2xs: 0.6875rem;
  --texto-xs: 0.75rem;
  --texto-s: 0.875rem;
  --texto-m: 1rem;
  --texto-l: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;
  --interlineado: 1.55;
  --interlineado-ajustado: 1.2;

  /* ---------- Espacio: grilla de 4px ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --ancho-max: 1120px;

  /* ---------- Formas ---------- */
  --trazo: 3px;
  --trazo-fino: 2px;
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-pildora: 999px;

  /* Sombras duras, sin blur: se sienten botones de consola. */
  --sombra-dura: 0 4px 0 var(--color-sombra);
  --sombra-dura-s: 0 2px 0 var(--color-sombra);
  --sombra-dura-alta: 0 7px 0 var(--color-sombra);

  /* ---------- Movimiento ---------- */
  --dur-rapida: 120ms;
  --dur-media: 240ms;
  --dur-lenta: 700ms;
  --curva-salida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Semánticos · tema Noche ---------- */
:root[data-tema="noche"] {
  color-scheme: dark;
  --color-fondo: #0c1710;
  --color-fondo-punto: #15271b;
  --color-superficie: #142319;
  --color-superficie-alt: #1a2e20;
  --color-tinta: #e4f0d8;
  --color-tinta-suave: #a2b897;
  --color-acento-texto: var(--verde-300);
  --color-trazo: #3d6139;
  --color-sombra: #040905;
  --color-separador: #24392a;
  --color-enlace: var(--verde-300);
  --color-seleccion: var(--verde-700);

  --color-carcasa: #24702a;
  --color-carcasa-luz: #3f9a3a;
  --color-carcasa-sombra: #134416;

  --color-pantalla: #0a180d;
  --color-pantalla-tinta: #b8ee94;
  --color-pantalla-brillo: #173019;

  --color-habitat-1: #16301d;
  --color-habitat-2: #24502a;
  --color-plataforma: #3a7f28;
  --color-plataforma-borde: #1f4a1b;
  --color-silueta: rgb(4 12 6 / 0.85);

  --color-ps-pista: #26352a;
  --color-ps-marco: #050b06;

  --color-pronto: #23452a;
  --color-pronto-tinta: var(--verde-100);

  --color-resaltado-info: rgb(120 200 80 / 0.3);
  --color-resaltado-alerta: rgb(244 196 48 / 0.35);
  --color-resaltado-peligro: rgb(224 103 154 / 0.35);

  --color-hierba-atras: #1f4a1b;
  --color-hierba-frente: #12301a;

  --stat-vacio: #26382b;
}