/* giglih · tokens.css
   Todas las variables del sistema. Cárgalo antes de components.css.
   Tema: sigue al sistema (prefers-color-scheme). Para forzarlo: <html data-theme="light|dark">. */

/* Fuentes: por defecto, las del sistema. Para usar IBM Plex (licencia OFL) autoalojada,
   copia los .woff2 en /static/fonts/ y descomenta este bloque.
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
*/

:root {
  /* Marca */
  --g-black: #111111; --g-black-800: #262626; --g-black-700: #3A3A3A;
  --g-teal-500: #2EC4B6; --g-teal-700: #0E7C72; --g-teal-100: #DDF5F2;

  /* Neutros */
  --g-gray-0: #FFFFFF; --g-gray-50: #F6F6F6; --g-gray-100: #EEEEEE; --g-gray-200: #E0E0E0;
  --g-gray-300: #C7C7C7; --g-gray-400: #BDBDBD; --g-gray-500: #666666; --g-gray-600: #525252; --g-gray-700: #3D3D3D;

  /* Tipografía */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px;
  --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 52px;
  --lh-tight: 1.15; --lh-base: 1.55;

  /* Espaciado (base 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --gutter: clamp(20px, 5vw, 80px);

  /* Radios */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* Táctil y anchos */
  --tap: 44px;
  --content-max: 1040px;
  --site-max: 1200px;
  --sidenav-w: 256px;
  --rail-w: 88px;

  /* Puntos de corte (referencia: las media queries no admiten variables; usa estos valores literales)
     móvil < 768 · tablet vertical 768–1023 · tablet horizontal 1024–1279 · escritorio ≥ 1280 */
  --bp-tablet: 768px; --bp-tablet-l: 1024px; --bp-desktop: 1280px;

  /* Tema claro */
  --bg: #F6F6F6; --surface: #FFFFFF; --surface-2: #EEEEEE;
  --border: #E0E0E0; --border-strong: #BDBDBD;
  --text: #111111; --text-2: #525252; --text-3: #5F5F5F;
  --primary: #111111; --primary-hover: #262626; --on-primary: #FFFFFF;
  --accent: #2EC4B6; --accent-text: #0E7C72; --accent-soft: #DDF5F2;
  --focus: #0E7C72;
  --band-bg: #111111; --on-band: #FFFFFF; --on-band-2: #BDBDBD;
  --success: #1D7046; --success-bg: #E6F4EC; --success-border: #9FD3B5;
  --warning: #8A5300; --warning-bg: #FFF4DB; --warning-border: #E2B25A;
  --danger: #B42318;  --danger-bg: #FDECEA;  --danger-border: #F0A9A2;
  --danger-solid: #B42318; --on-danger-solid: #FFFFFF;
  --info: #1F4E8C; --info-bg: #EAF1FB; --info-border: #A9C3E8;
  --code-bg: #111111; --code-text: #EDEDED; --code-muted: #9A9A9A;
  --scrim: rgba(0, 0, 0, .5);

  /* Sombras */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.07);
  --shadow-2: 0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-3: 0 24px 56px rgba(0,0,0,.22);

  color-scheme: light dark;
}

/* Tema oscuro: automático según el sistema… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0B; --surface: #161616; --surface-2: #202020;
    --border: #2E2E2E; --border-strong: #474747;
    --text: #EDEDED; --text-2: #BDBDBD; --text-3: #A3A3A3;
    --primary: #2EC4B6; --primary-hover: #4BD3C6; --on-primary: #111111;
    --accent: #2EC4B6; --accent-text: #5DD8CC; --accent-soft: #12343A;
    --focus: #5DD8CC;
    --band-bg: #161616; --on-band: #EDEDED; --on-band-2: #BDBDBD;
    --success: #6AD39E; --success-bg: #0F2A1E; --success-border: #22573B;
    --warning: #F2C45A; --warning-bg: #2C2310; --warning-border: #6B5219;
    --danger: #FF948A;  --danger-bg: #331619;  --danger-border: #7A2E2E;
    --danger-solid: #F28B82; --on-danger-solid: #2A0A0A;
    --info: #8DB8F2; --info-bg: #13243D; --info-border: #2D4D7A;
    --code-bg: #050505; --code-text: #EDEDED; --code-muted: #9A9A9A;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 4px 14px rgba(0,0,0,.35);
    --shadow-3: 0 24px 56px rgba(0,0,0,.55);
  }
}

/* …o forzado con data-theme="dark" (mismos valores) */
:root[data-theme="dark"] {
  --bg: #0B0B0B; --surface: #161616; --surface-2: #202020;
  --border: #2E2E2E; --border-strong: #474747;
  --text: #EDEDED; --text-2: #BDBDBD; --text-3: #A3A3A3;
  --primary: #2EC4B6; --primary-hover: #4BD3C6; --on-primary: #111111;
  --accent: #2EC4B6; --accent-text: #5DD8CC; --accent-soft: #12343A;
  --focus: #5DD8CC;
  --band-bg: #161616; --on-band: #EDEDED; --on-band-2: #BDBDBD;
  --success: #6AD39E; --success-bg: #0F2A1E; --success-border: #22573B;
  --warning: #F2C45A; --warning-bg: #2C2310; --warning-border: #6B5219;
  --danger: #FF948A;  --danger-bg: #331619;  --danger-border: #7A2E2E;
  --danger-solid: #F28B82; --on-danger-solid: #2A0A0A;
  --info: #8DB8F2; --info-bg: #13243D; --info-border: #2D4D7A;
  --code-bg: #050505; --code-text: #EDEDED; --code-muted: #9A9A9A;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 14px rgba(0,0,0,.35);
  --shadow-3: 0 24px 56px rgba(0,0,0,.55);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }