/* tokens.css — sistema de diseño del panel. Todo color de la interfaz sale de aquí.
   --acento lo pone js/core/tema.js desde MARCA.acento; los neutros se derivan con color-mix
   para que tengan un sesgo leve hacia el acento (nunca gris puro). Tema claro en :root,
   oscuro bajo prefers-color-scheme y bajo [data-theme="dark"]. */
:root{
  --acento:#ec6a2e;
  --fuente:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --radio:14px; --radio-sm:9px;
  --t12:12px; --t13:13.5px; --t15:15px; --t18:18px; --t24:24px; --t32:32px;

  /* claro */
  --fondo:        color-mix(in srgb, var(--acento) 4%,  #f7f6f3);
  --superficie:   color-mix(in srgb, var(--acento) 2%,  #ffffff);
  --superficie-2: color-mix(in srgb, var(--acento) 7%,  #f1efeb);
  --linea:        color-mix(in srgb, var(--acento) 12%, #dcd8d1);
  --texto:        color-mix(in srgb, var(--acento) 6%,  #1c1a17);
  --texto-2:      color-mix(in srgb, var(--acento) 8%,  #6b665e);
  --acento-suave: color-mix(in srgb, var(--acento) 12%, transparent);
  --acento-texto: #ffffff;
  /* acento usado como TEXTO pequeño sobre fondo claro: el acento puro da 2.8–3.1:1; oscurecido llega a 4.5:1 */
  --acento-texto-sobre-claro: color-mix(in srgb, var(--acento) 78%, black);
  --ok:#2f9e5b; --aviso:#d9931f; --error:#d5473a;
  --sombra: 0 1px 2px rgba(20,16,10,.06), 0 8px 24px -12px rgba(20,16,10,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:        color-mix(in srgb, var(--acento) 5%,  #121110);
    --superficie:   color-mix(in srgb, var(--acento) 4%,  #1a1917);
    --superficie-2: color-mix(in srgb, var(--acento) 8%,  #23211d);
    --linea:        color-mix(in srgb, var(--acento) 14%, #33302b);
    --texto:        #f2efe9;
    --texto-2:      color-mix(in srgb, var(--acento) 10%, #a39d93);
    --acento-suave: color-mix(in srgb, var(--acento) 18%, transparent);
    --acento-texto: #16100a;
    --acento-texto-sobre-claro: var(--acento);
    --ok:#5fc987; --aviso:#e8b04a; --error:#ef6b5e;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --fondo:        color-mix(in srgb, var(--acento) 5%,  #121110);
  --superficie:   color-mix(in srgb, var(--acento) 4%,  #1a1917);
  --superficie-2: color-mix(in srgb, var(--acento) 8%,  #23211d);
  --linea:        color-mix(in srgb, var(--acento) 14%, #33302b);
  --texto:        #f2efe9;
  --texto-2:      color-mix(in srgb, var(--acento) 10%, #a39d93);
  --acento-suave: color-mix(in srgb, var(--acento) 18%, transparent);
  --acento-texto: #16100a;
  --acento-texto-sobre-claro: var(--acento);
  --ok:#5fc987; --aviso:#e8b04a; --error:#ef6b5e;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
}

/* Alias de las variables que usan las secciones existentes (base.css y estilos en línea).
   Gracias a esto el código legado toma la paleta nueva sin tocarlo. */
:root{
  --bg:var(--fondo); --bg2:var(--superficie-2); --card:var(--superficie); --card2:var(--superficie-2);
  --line:var(--linea); --orange:var(--acento);
  --orange-soft:color-mix(in srgb, var(--acento) 78%, white);
  --cream:var(--texto); --muted:var(--texto-2); --good:var(--ok); --bad:var(--error);
  --r:var(--radio); --modo-color:var(--acento);
}
html{color-scheme:light dark}
body{background:var(--fondo);color:var(--texto);font-family:var(--fuente)}