/* =========================================================================
   Sistema de diseño — suite KuNalé · Compras
   Identidad de marca: verde #3D6F49 · amarillo #E8C546 (logos de /imagenes).
   Dos temas: claro y oscuro. El oscuro es el predeterminado (ver theme.js).
   Sin beige: fondos neutros fríos en claro, verde muy oscuro en oscuro.
   ========================================================================= */

:root{
  /* --- Marca (igual en ambos temas) --- */
  --marca-verde:#3D6F49;
  --marca-amarillo:#E8C546;

  /* --- TEMA CLARO (por defecto de :root) --- */
  --bg:#F1F4F0;
  --surface:#FFFFFF;
  --surface-2:#F7F9F6;
  --surface-3:#E9EEE7;
  --border:#D9E0D6;
  --border-strong:#C3CDC0;

  --text:#18201A;
  --text-2:#53604F;
  --text-3:#758170;

  --primary:#3D6F49;
  --primary-hover:#335E3E;
  --primary-ink:#FFFFFF;
  --primary-text:#356140;          /* verde legible sobre superficie */

  --accent:#E8C546;
  --accent-strong:#CFA81F;
  --accent-ink:#231F07;

  --ok:#3D6F49;      --ok-bg:#E4EFD7;   --ok-text:#2C5236;
  --warn:#B5850A;    --warn-bg:#FBEECB; --warn-text:#7A5A06;
  --danger:#C23B26;  --danger-bg:#FAE4DE;--danger-text:#8F2C1A;
  --info:#2E6FA8;    --info-bg:#E1ECF5; --info-text:#20537E;

  /* Superficie "tinta": chip/pastilla oscura con texto claro (dark en ambos temas) */
  --ink:#1B241C;
  --ink-text:#EAF0E2;
  --ink-accent:#E8C546;

  /* Barra lateral (siempre oscura, ambos temas) */
  --nav-bg:#11170F;
  --nav-surface:#1A2218;
  --nav-text:#CBD4C3;
  --nav-text-dim:#8C9885;
  --nav-active-bg:#3D6F49;
  --nav-active-text:#FFFFFF;
  --nav-accent:#E8C546;
  --nav-border:rgba(255,255,255,.08);

  /* Tinte verde suave (fondos de icono, avisos) */
  --tint:#E7EFDB;
  --tint-text:#355E3F;

  --ring:0 0 0 3px rgba(61,111,73,.32);
  --shadow-menu:0 10px 28px rgba(20,26,16,.13), 0 3px 8px rgba(20,26,16,.07);
  --shadow-float:0 24px 56px rgba(20,26,16,.22), 0 8px 18px rgba(20,26,16,.10);

  color-scheme:light;

  /* --- Alias de compatibilidad con CSS/vistas previas --- */
  --corteza:var(--text);
  --crema:var(--bg);
  --crema-honda:var(--surface-3);
  --hueso:var(--surface-2);
  --nieve:var(--surface);
  --borde:var(--border);
  --borde-fuerte:var(--border-strong);
  --gris:var(--text-2);
  --gris-claro:var(--text-3);
  --hoja:var(--primary-text);
  --hoja-viva:var(--primary-hover);
  --hoja-honda:var(--ok-text);
  --manzana:var(--primary);
  --manzana-luz:var(--accent);
  --manzana-neon:var(--accent);
  --verde-suave:var(--tint);
  --rojo:var(--danger);
  --rojo-honda:var(--danger-text);
  --rojo-suave:var(--danger-bg);
  --ambar:var(--warn);
  --ambar-honda:var(--warn-text);
  --ambar-suave:var(--warn-bg);
  --ambar-luz:var(--accent);
  --azul:var(--info);
  --azul-honda:var(--info-text);
  --azul-suave:var(--info-bg);
  --sombra-menu:var(--shadow-menu);
  --sombra-flote:var(--shadow-float);
  --anillo:var(--ring);

  /* Radios */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* Tipografía */
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --texto:'Barlow','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  /* Layout */
  --sidebar-w:272px;
  --topbar-h:68px;
  --contenido-max:1280px;

  --t-rapida:.14s ease;
  --t-media:.2s cubic-bezier(.22,.61,.36,1);
}

/* --- TEMA OSCURO --- */
:root[data-theme="dark"],
:root:not([data-theme="light"]){
  --bg:#0F130D;
  --surface:#171D14;
  --surface-2:#1B2218;
  --surface-3:#232B1F;
  --border:#2C3527;
  --border-strong:#3D4835;

  --text:#E7ECDF;
  --text-2:#A0AB93;
  --text-3:#727D65;

  --primary:#3D6F49;
  --primary-hover:#47804F;
  --primary-ink:#FFFFFF;
  --primary-text:#7FC091;

  --accent:#E8C546;
  --accent-strong:#F0D471;
  --accent-ink:#231F07;

  --ok:#8FBF6A;      --ok-bg:#20301C;   --ok-text:#AED58F;
  --warn:#E0B23C;    --warn-bg:#332913; --warn-text:#F0D27E;
  --danger:#E06A50;  --danger-bg:#3A211B;--danger-text:#F0A08C;
  --info:#5A9BD4;    --info-bg:#182835; --info-text:#9CC6E8;

  --ink:#252E20;
  --ink-text:#E7ECDF;
  --ink-accent:#E8C546;

  --tint:#20301E;
  --tint-text:#9FD0A9;

  --ring:0 0 0 3px rgba(127,192,145,.30);
  --shadow-menu:0 8px 22px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-float:0 24px 50px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.45);

  color-scheme:dark;
}

/* El toggle a claro siempre gana */
:root[data-theme="light"]{ color-scheme:light; }