/* Tokens: Tipografía "Taller claro" (Manrope + JetBrains Mono) + Look "Vidrio de tablero".
   Los nombres de tokens se mantienen; --surface/--head-bg son SÓLIDOS por defecto (respaldo);
   el vidrio (--glass*) se activa solo en base.css con @supports + media (escritorio, sin
   reduced-transparency ni ahorro de datos). Sin preferencia guardada manda prefers-color-scheme. */
:root {
  --paper: #E8EDF3; --surface: #FFFFFF; --surface-2: #E1E7EE;
  --ink: #0B1620; --ink-2: #2A3947; --muted: #4A5866;
  --grid: rgba(11, 22, 32, .10); --grid-strong: #7D8B99;
  --line: #0A6684; --line-ink: #FFFFFF;
  --signal: #8A5300; --signal-fill: #FFB547; --signal-ink: #1A1000;
  --alert: #B3261E; --alert-ink: #FFFFFF;
  --ok: #1F7A4C;
  --focus: #D9480F;

  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h-weight: 800; --h-track: -.025em; --label-case: none; --label-track: .01em;

  --measure: 104ch;
  --gutter: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 40px; --space-7: 64px;
  --radius: 14px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-btn: 12px; --r-chip: 8px;

  /* Vidrio (valores; se aplican solo en el bloque @supports de base.css) */
  --glass: rgba(255, 255, 255, .74); --glass-blur: saturate(170%) blur(16px);
  --head-bg: #F2F5F9; --head-glass: rgba(232, 237, 243, .72);
  --card-border: rgba(255, 255, 255, .7); --panel-border: rgba(11, 22, 32, .12);
  --field-border: #66768A; --btn-border: rgba(11, 22, 32, .22);
  --btn-primary-bg: linear-gradient(180deg, #0C7697, #0A6684);
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -8px rgba(10, 102, 132, .6);
  --shadow-1: 0 1px 2px rgba(11, 22, 32, .06), 0 8px 24px -10px rgba(11, 22, 32, .18);
  --shadow-2: 0 20px 40px -12px rgba(11, 22, 32, .28);
  --bg-art: radial-gradient(42rem 32rem at 12% 8%, #CDE3F1, transparent 62%), radial-gradient(38rem 28rem at 88% 18%, #F7E3C3, transparent 62%), radial-gradient(52rem 40rem at 50% 105%, #D8DEF0, transparent 62%);
  --bg-art-lite: radial-gradient(36rem 26rem at 20% 0%, #CDE3F1, transparent 62%);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #070B12; --surface: #121A26; --surface-2: #1B2634;
    --ink: #EAF1F8; --ink-2: #C5D2DF; --muted: #A9B8C8;
    --grid: rgba(255, 255, 255, .09); --grid-strong: #5D6E80;
    --line: #5CD3F5; --line-ink: #04121A;
    --signal: #FFB547; --signal-fill: #FFB547; --signal-ink: #1A1000;
    --alert: #FF7A70; --alert-ink: #1A0503;
    --ok: #5EE0A0; --focus: #FFB547;
    --glass: rgba(20, 28, 40, .72);
    --head-bg: #0D141E; --head-glass: rgba(7, 11, 18, .66);
    --card-border: rgba(255, 255, 255, .10); --panel-border: rgba(255, 255, 255, .14);
    --field-border: #7C8FA3; --btn-border: rgba(255, 255, 255, .22);
    --btn-primary-bg: linear-gradient(180deg, #7BDDF8, #4CC6EC);
    --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(92, 211, 245, .3), 0 10px 28px -8px rgba(92, 211, 245, .55);
    --shadow-1: 0 10px 30px -12px rgba(0, 0, 0, .7);
    --shadow-2: 0 24px 50px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(92, 211, 245, .18);
    --bg-art: radial-gradient(44rem 34rem at 18% 0%, rgba(56, 189, 248, .20), transparent 62%), radial-gradient(38rem 28rem at 92% 30%, rgba(255, 181, 71, .12), transparent 62%), radial-gradient(52rem 40rem at 40% 110%, rgba(99, 102, 241, .16), transparent 62%);
    --bg-art-lite: radial-gradient(36rem 26rem at 20% 0%, rgba(56, 189, 248, .16), transparent 62%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #070B12; --surface: #121A26; --surface-2: #1B2634;
  --ink: #EAF1F8; --ink-2: #C5D2DF; --muted: #A9B8C8;
  --grid: rgba(255, 255, 255, .09); --grid-strong: #5D6E80;
  --line: #5CD3F5; --line-ink: #04121A;
  --signal: #FFB547; --signal-fill: #FFB547; --signal-ink: #1A1000;
  --alert: #FF7A70; --alert-ink: #1A0503;
  --ok: #5EE0A0; --focus: #FFB547;
  --glass: rgba(20, 28, 40, .72);
  --head-bg: #0D141E; --head-glass: rgba(7, 11, 18, .66);
  --card-border: rgba(255, 255, 255, .10); --panel-border: rgba(255, 255, 255, .14);
  --field-border: #7C8FA3; --btn-border: rgba(255, 255, 255, .22);
  --btn-primary-bg: linear-gradient(180deg, #7BDDF8, #4CC6EC);
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(92, 211, 245, .3), 0 10px 28px -8px rgba(92, 211, 245, .55);
  --shadow-1: 0 10px 30px -12px rgba(0, 0, 0, .7);
  --shadow-2: 0 24px 50px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(92, 211, 245, .18);
  --bg-art: radial-gradient(44rem 34rem at 18% 0%, rgba(56, 189, 248, .20), transparent 62%), radial-gradient(38rem 28rem at 92% 30%, rgba(255, 181, 71, .12), transparent 62%), radial-gradient(52rem 40rem at 40% 110%, rgba(99, 102, 241, .16), transparent 62%);
  --bg-art-lite: radial-gradient(36rem 26rem at 20% 0%, rgba(56, 189, 248, .16), transparent 62%);
  color-scheme: dark;
}