/* ============================================================
   tokens.css — sistema de diseño de Planificadora
   Escala neutra zinc + acento violeta + verde reservado a progreso.
   Todo color de la app debe salir de una variable de este archivo.
   ============================================================ */

:root{
  /* --- escala neutra (zinc) --- */
  --zinc-50:#fafafa;  --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8;
  --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46;
  --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b;

  /* --- acento y semánticos (idénticos en ambos temas salvo ajuste de brillo) --- */
  --accent:#8b5cf6;
  --accent-hover:#7c3aed;
  --accent-ink:#ffffff;
  --accent-soft:rgba(139,92,246,.12);
  --ok:#22c55e;
  --ok-soft:rgba(34,197,94,.14);
  --warn:#f59e0b;
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.12);

  /* --- superficies y texto: TEMA CLARO --- */
  --bg-page:var(--zinc-100);
  --bg-app-50:#ffffff;
  --bg-app-100:var(--zinc-50);
  --bg-app-200:var(--zinc-100);
  --bg-app-300:var(--zinc-200);
  --text-50:var(--zinc-950);
  --text-100:var(--zinc-900);
  --text-200:var(--zinc-600);
  --text-300:var(--zinc-400);
  --border-50:var(--zinc-200);
  --border-100:var(--zinc-300);
  --border-200:var(--zinc-400);
  --aside-bg:#ffffff;
  --shadow:0 1px 2px rgba(9,9,11,.05), 0 12px 32px -20px rgba(9,9,11,.35);

  /* --- medidas --- */
  --aside-w:264px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --gap:16px;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- TEMA OSCURO por preferencia del sistema (sin elección explícita) --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-page:var(--zinc-950);
    --bg-app-50:var(--zinc-950);
    --bg-app-100:var(--zinc-900);
    --bg-app-200:var(--zinc-800);
    --bg-app-300:var(--zinc-700);
    --text-50:var(--zinc-50);
    --text-100:var(--zinc-200);
    --text-200:var(--zinc-400);
    --text-300:var(--zinc-500);
    --border-50:var(--zinc-800);
    --border-100:var(--zinc-700);
    --border-200:var(--zinc-600);
    --aside-bg:var(--zinc-950);
    --accent-soft:rgba(139,92,246,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
  }
}

/* --- TEMA OSCURO por elección explícita --- */
:root[data-theme="dark"]{
  --bg-page:var(--zinc-950);
  --bg-app-50:var(--zinc-950);
  --bg-app-100:var(--zinc-900);
  --bg-app-200:var(--zinc-800);
  --bg-app-300:var(--zinc-700);
  --text-50:var(--zinc-50);
  --text-100:var(--zinc-200);
  --text-200:var(--zinc-400);
  --text-300:var(--zinc-500);
  --border-50:var(--zinc-800);
  --border-100:var(--zinc-700);
  --border-200:var(--zinc-600);
  --aside-bg:var(--zinc-950);
  --accent-soft:rgba(139,92,246,.18);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
}