/* ===================================================================
   PALETA ÚNICA DE OLLAMYN STUDIO  (css/base/tokens.css)
   -------------------------------------------------------------------
   Esta es la ÚNICA fuente de color de todo el proyecto: la app
   (home.html) y el acceso (login.html) leen de aquí. Para cambiar un
   color, cámbialo SOLO en este archivo. No pongas colores fijos
   (#hex / rgb) en ningún otro CSS: usa siempre var(--...).
   Modo claro = :root ; modo oscuro = los dos bloques de más abajo.
   Layout: barra lateral fija + main fluido; bajo ~900px es cajón.
   Tipografías: Newsreader (display) / Hanken Grotesk (ui) / IBM Plex Mono (datos).
   =================================================================== */
:root{
  --bg:#F6F6F4; --surface:#FFFFFF; --surface-2:#F7F8FA; --inset:#EFF1F4;
  --fg:#181B20; --muted:#5B626C; --faint:#949BA5;
  --line:#EAECEF; --line-2:#DADEE3;
  --accent:#1E2024; --accent-ink:#17181C; --accent-soft:#EDEEF0; --on-accent:#FFFFFF;
  --accent-2:#3A3D44;
  --ok:#1E9E5A; --ok-soft:#E6F6EC; --warn:#B7791F; --warn-soft:#FBF0D8;
  --crit:#CF3E3E; --crit-soft:#FBE6E6; --info:#2E73D6; --info-soft:#E6EFFB;
  --shadow-sm:0 1px 2px rgba(17,20,28,.05);
  --shadow:0 2px 6px -2px rgba(17,20,28,.07), 0 10px 28px -16px rgba(17,20,28,.14);
  --shadow-lg:0 12px 26px -12px rgba(17,20,28,.12), 0 34px 60px -30px rgba(17,20,28,.18);
  --shadow-accent:0 10px 24px -12px rgba(18,20,26,.30);
  --ring:rgba(30,32,36,.22);
  --grad-accent:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--accent-2)));
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ===== ALIAS DE LA PALETA PARA EL LOGIN (mismos colores, otros nombres) =====
   El login.css usa estos nombres; apuntan a los tokens de arriba para que la
   app y el login compartan UNA sola paleta. Como referencian tokens que ya
   cambian con el tema, también funcionan solos en modo oscuro. */
:root{
  --text:var(--fg);
  --panel:var(--surface-2);
  --border:var(--line-2);
  --input:var(--surface);
  --shape:var(--inset);
  --accent-hover:var(--accent-2);
  --glass:color-mix(in srgb,var(--surface) 72%,transparent);
  --glass-strong:color-mix(in srgb,var(--surface) 88%,transparent);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1216; --surface:#171B21; --surface-2:#1E232A; --inset:#13171C;
  --fg:#E8EAED; --muted:#9BA2AC; --faint:#6B7380;
  --line:#252B33; --line-2:#333B45;
  --accent:#E7E8EC; --accent-ink:#D8DAE0; --accent-soft:#24262B; --on-accent:#17181C;
  --accent-2:#C4C6CC;
  --ok:#39C47A; --ok-soft:#12271A; --warn:#D6A748; --warn-soft:#2A2214; --crit:#E06464;
  --crit-soft:#2C1818; --info:#5AA0E6; --info-soft:#15222E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px -2px rgba(0,0,0,.42), 0 12px 30px -16px rgba(0,0,0,.66);
  --shadow-lg:0 14px 30px -12px rgba(0,0,0,.55), 0 38px 66px -30px rgba(0,0,0,.8);
  --shadow-accent:0 12px 30px -12px rgba(0,0,0,.5);
  --ring:rgba(231,232,236,.3);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F1216; --surface:#171B21; --surface-2:#1E232A; --inset:#13171C;
  --fg:#E8EAED; --muted:#9BA2AC; --faint:#6B7380;
  --line:#252B33; --line-2:#333B45;
  --accent:#E7E8EC; --accent-ink:#D8DAE0; --accent-soft:#24262B; --on-accent:#17181C;
  --accent-2:#C4C6CC;
  --ok:#39C47A; --ok-soft:#12271A; --warn:#D6A748; --warn-soft:#2A2214; --crit:#E06464;
  --crit-soft:#2C1818; --info:#5AA0E6; --info-soft:#15222E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px -2px rgba(0,0,0,.42), 0 12px 30px -16px rgba(0,0,0,.66);
  --shadow-lg:0 14px 30px -12px rgba(0,0,0,.55), 0 38px 66px -30px rgba(0,0,0,.8);
  --shadow-accent:0 12px 30px -12px rgba(0,0,0,.5);
  --ring:rgba(231,232,236,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}