/* Guía FastAPI · sistema de tokens.
 *
 * Dos temas completos. El oscuro es el de la plataforma; el claro existe
 * porque estas guías se proyectan en aulas con luz encendida, donde el
 * oscuro se lee mal, y porque hay quien lo necesita para leer cómodo.
 *
 * Regla: ningún color literal fuera de este archivo. Los valores de cada tema
 * se eligieron midiendo contraste, no a ojo; los comentarios registran la
 * razón de los que no son obvios.
 */

/* ------------------------------------------------------------------ *
 *  Tema oscuro (por defecto)                                          *
 * ------------------------------------------------------------------ */

:root {
  /* Medidas de composición */
  /* Medida de lectura de la prosa: por encima de ~80 caracteres la vista pierde
     el punto de retorno al saltar de renglón. */
  --g-max-content: 78ch;
  /* Medida de los bloques que no se leen renglón a renglón —código, tablas,
     comparativas, diagramas—. Se miden en `ch` sobre la fuente monoespaciada
     que llevan dentro, de modo que 124 caracteres caben sin desplazamiento. */
  --g-max-ancho: 124ch;
  --g-sidebar-w: clamp(15rem, 24vw, 19rem);
  --g-header-h: 4.5rem;

  /* Estado */
  --g-ok: #3fb950;
  --g-warn: #d29922;
  --g-danger: #f85149;
  --g-info: #58a6ff;

  /* Identidad de las dos estaciones que este puente conecta */
  --g-fastapi: #2ec4b6;          /* aclarado respecto al #009688 de marca: sobre
                                    el fondo oscuro aquel se queda en el límite
                                    de AA y este lo supera con holgura */
  --g-fastapi-soft: rgba(46, 196, 182, 0.14);
  --g-flutter: #47b6f6;
  --g-flutter-soft: rgba(2, 86, 155, 0.28);
  --g-python: #ffd43b;

  /* Texto auxiliar.
     El `--sdk-text-muted` del SDK (#484f58) se queda en 2.1:1 sobre la
     superficie secundaria: sirve para trazos decorativos, no para texto.
     Estos dos sí pasan AA y son los que se usan cuando hay letras. */
  --g-text-faint: #8b949e;      /* 5.3:1 sobre --sdk-bg-secondary */
  --g-text-soft: #9da7b2;       /* 5.4:1 sobre superficies con tinte de color */

  /* Superficies auxiliares */
  --g-on-accent: #04121a;

  /* El teléfono simulado es la pantalla de un dispositivo, no parte de la
     página: se queda oscuro en los dos temas. Por eso su texto tiene tokens
     propios que NO se invierten; si heredara los del tema, en modo claro
     pintaría texto oscuro sobre pantalla oscura. */
  --g-phone-frame: #10161c;
  --g-phone-screen: #0b1116;
  --g-phone-notch: #2b3640;
  --g-phone-text: #e8edf5;
  --g-phone-muted: #a8b3bd;
  --g-phone-accent: #6ec5ff;
  --g-track: #263039;
  --g-veil: rgba(0, 0, 0, 0.55);
  --g-tint-soft: rgba(255, 255, 255, 0.03);
  --g-tint-strong: rgba(255, 255, 255, 0.06);
  --g-flutter-line: rgba(71, 182, 246, 0.25);
  --g-mark-bg: rgba(210, 153, 34, 0.28);

  /* Elevación */
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --g-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --g-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* Movimiento */
  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --g-fast: 0.15s var(--g-ease);
  --g-normal: 0.25s var(--g-ease);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ *
 *  Tema claro                                                         *
 *                                                                     *
 *  Se reescriben también los tokens del SDK, que solo trae paleta      *
 *  oscura. Cada color de estado se oscurece hasta pasar AA sobre       *
 *  blanco: el naranja y el verde del tema oscuro sobre fondo claro     *
 *  quedan en 2:1 y son ilegibles.                                      *
 * ------------------------------------------------------------------ */

:root[data-theme='claro'] {
  /* Tokens del SDK */
  --sdk-bg-primary: #ffffff;
  --sdk-bg-secondary: #f3f6f5;
  --sdk-bg-card: #ffffff;
  --sdk-bg-glass: rgba(255, 255, 255, 0.9);
  --sdk-bg-code: #f6f8fa;

  --sdk-accent: #00695c;
  --sdk-accent-dark: #004d40;
  --sdk-accent-glow: rgba(0, 105, 92, 0.18);

  --sdk-text-primary: #16211d;
  --sdk-text-secondary: #4a5a55;
  --sdk-text-muted: #6b7a75;

  --sdk-glass-blur: 12px;
  --sdk-glass-border: rgba(22, 33, 29, 0.14);

  /* Estado, recalibrado sobre fondo blanco */
  --g-ok: #1a7f37;
  --g-warn: #8a5a00;
  --g-danger: #c02626;
  --g-info: #0b5cad;

  --g-fastapi: #00695c;
  --g-fastapi-soft: rgba(0, 105, 92, 0.09);
  --g-flutter: #02569b;
  --g-flutter-soft: rgba(2, 86, 155, 0.09);
  --g-python: #8a6d00;

  --g-text-faint: #5c6b66;      /* 5.4:1 sobre --sdk-bg-secondary claro */
  --g-text-soft: #4a5a55;

  --g-on-accent: #ffffff;

  /* La pantalla del teléfono sigue siendo oscura: mismos tokens de texto que
     en el tema oscuro, solo se aclara el marco para que no compita con la
     página blanca. */
  --g-phone-frame: #1b2430;
  --g-phone-screen: #0f1720;
  --g-phone-notch: #3a4756;
  --g-phone-text: #e8edf5;
  --g-phone-muted: #a8b3bd;
  --g-phone-accent: #6ec5ff;
  --g-track: #dde5e2;
  --g-veil: rgba(22, 33, 29, 0.45);
  --g-tint-soft: rgba(22, 33, 29, 0.035);
  --g-tint-strong: rgba(22, 33, 29, 0.07);
  --g-flutter-line: rgba(2, 86, 155, 0.28);
  --g-mark-bg: rgba(255, 214, 0, 0.45);

  --g-shadow-sm: 0 1px 2px rgba(22, 33, 29, 0.08);
  --g-shadow-md: 0 4px 14px rgba(22, 33, 29, 0.1);
  --g-shadow-lg: 0 10px 28px rgba(22, 33, 29, 0.14);

  color-scheme: light;
}