/* =====================================================================
   TOKENS
   La paleta COMPLETA vive en `:root`. Los bloques de tema solo REDEFINEN.
   Ningun color se define unicamente dentro de una media query: si lo
   hiciera, el tema claro se quedaria sin ese color.

   SEMANTICA ESTRICTA DEL COLOR. No hay color decorativo aqui:
     --sem-ok      verde   -> termino y sus contadores de incidencia son cero
     --sem-warn    ambar   -> degradado, parcial, bloqueado-por-candado, caducado
     --sem-error   rojo    -> fallo real
     --sem-run     azul    -> en curso
     --sem-write   violeta -> RESERVADO: "esto escribe". Y NADA MAS.

   El violeta no se usa para enlaces, ni para acentos, ni para el foco. Si
   aparece en pantalla significa que esa cosa escribe en un sistema externo.
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- Superficies ------------------------------------------------- */
  --bg: #f6f7f9;
  --bg-sunken: #eceef2;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --surface-inset: #f2f4f7;

  /* --- Texto ------------------------------------------------------- */
  --text: #16191f;
  --text-muted: #565e6c;
  --text-faint: #78808e;
  --text-invert: #ffffff;

  /* --- Bordes ------------------------------------------------------ */
  --border: #d8dce3;
  --border-strong: #b9c0ca;
  --border-subtle: #e6e9ee;

  /* --- Acento neutro (navegacion, foco, acciones neutras) ---------- */
  --accent: #1f6feb;
  --accent-text: #0f4fb0;
  --accent-soft: #e6f0fd;
  --focus: #1f6feb;

  /* --- Semanticos: base, texto legible y fondo suave --------------- */
  --sem-ok: #1a7f45;
  --sem-ok-text: #146636;
  --sem-ok-bg: #e3f5ea;
  --sem-ok-border: #a9dcbf;

  --sem-warn: #9a6100;
  --sem-warn-text: #7d4f00;
  --sem-warn-bg: #fdf0d8;
  --sem-warn-border: #e8c489;

  --sem-error: #c02626;
  --sem-error-text: #a01d1d;
  --sem-error-bg: #fdeaea;
  --sem-error-border: #f0b5b5;

  --sem-run: #1156b5;
  --sem-run-text: #0d4795;
  --sem-run-bg: #e5effc;
  --sem-run-border: #a9c9f2;

  /* EL COLOR RESERVADO. Solo modo de escritura. */
  --sem-write: #7b2fbe;
  --sem-write-text: #6a25a8;
  --sem-write-bg: #f3e9fb;
  --sem-write-border: #d5b8ef;

  --sem-idle: #5a6270;
  --sem-idle-text: #474e5a;
  --sem-idle-bg: #edeff3;
  --sem-idle-border: #ccd2db;

  /* --- Tipografia --------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 24px;

  /* --- Espaciado (densidad compacta a proposito) -------------------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;
  --sp-8: 32px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 2px rgba(16, 20, 28, 0.06), 0 1px 1px rgba(16, 20, 28, 0.04);
  --shadow-2: 0 8px 24px rgba(16, 20, 28, 0.14);

  /* --- Movimiento: casi nada --------------------------------------- */
  --t-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* --- Alturas --------------------------------------------------- */
  --topbar-h: 48px;
  --tabbar-h: 56px;
  --touch: 44px;
}

/* ---------------------------------------------------------------------
   OSCURO POR PREFERENCIA DEL SISTEMA.
   Guardado con :not([data-theme="light"]) para que el conmutador manual
   gane en las dos direcciones.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0d1015;
    --bg-sunken: #080a0e;
    --surface: #14181f;
    --surface-2: #191e27;
    --surface-3: #212734;
    --surface-inset: #10141a;

    --text: #e7eaf0;
    --text-muted: #a2abb9;
    --text-faint: #7e8797;
    --text-invert: #0d1015;

    --border: #2b3240;
    --border-strong: #3c4556;
    --border-subtle: #222834;

    --accent: #4c9aff;
    --accent-text: #8fbdff;
    --accent-soft: #16283f;
    --focus: #67aaff;

    --sem-ok: #3fb972;
    --sem-ok-text: #74dfa2;
    --sem-ok-bg: #10281b;
    --sem-ok-border: #245c3c;

    --sem-warn: #e0a028;
    --sem-warn-text: #f0c465;
    --sem-warn-bg: #2c2210;
    --sem-warn-border: #6a5320;

    --sem-error: #f0605e;
    --sem-error-text: #ff9a97;
    --sem-error-bg: #2e1416;
    --sem-error-border: #6d2c2e;

    --sem-run: #4c9aff;
    --sem-run-text: #93c2ff;
    --sem-run-bg: #10203a;
    --sem-run-border: #274a7d;

    --sem-write: #b481f0;
    --sem-write-text: #cfa9fb;
    --sem-write-bg: #241634;
    --sem-write-border: #4f2f74;

    --sem-idle: #8892a3;
    --sem-idle-text: #aab3c1;
    --sem-idle-bg: #1b212b;
    --sem-idle-border: #333b49;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.6);
  }
}

/* ---------------------------------------------------------------------
   OSCURO FORZADO POR EL CONMUTADOR. Mismos valores, mayor especificidad.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1015;
  --bg-sunken: #080a0e;
  --surface: #14181f;
  --surface-2: #191e27;
  --surface-3: #212734;
  --surface-inset: #10141a;

  --text: #e7eaf0;
  --text-muted: #a2abb9;
  --text-faint: #7e8797;
  --text-invert: #0d1015;

  --border: #2b3240;
  --border-strong: #3c4556;
  --border-subtle: #222834;

  --accent: #4c9aff;
  --accent-text: #8fbdff;
  --accent-soft: #16283f;
  --focus: #67aaff;

  --sem-ok: #3fb972;
  --sem-ok-text: #74dfa2;
  --sem-ok-bg: #10281b;
  --sem-ok-border: #245c3c;

  --sem-warn: #e0a028;
  --sem-warn-text: #f0c465;
  --sem-warn-bg: #2c2210;
  --sem-warn-border: #6a5320;

  --sem-error: #f0605e;
  --sem-error-text: #ff9a97;
  --sem-error-bg: #2e1416;
  --sem-error-border: #6d2c2e;

  --sem-run: #4c9aff;
  --sem-run-text: #93c2ff;
  --sem-run-bg: #10203a;
  --sem-run-border: #274a7d;

  --sem-write: #b481f0;
  --sem-write-text: #cfa9fb;
  --sem-write-bg: #241634;
  --sem-write-border: #4f2f74;

  --sem-idle: #8892a3;
  --sem-idle-text: #aab3c1;
  --sem-idle-bg: #1b212b;
  --sem-idle-border: #333b49;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.6);
}