/* ============================================================================
   KAIRO · Design tokens
   ----------------------------------------------------------------------------
   ANGULAR 21 → copiar tal cual a `src/styles/_tokens.css` e importarlo en
   `styles.css` (global, NO dentro de un componente: los tokens tienen que
   vivir en :root para que los componentes standalone los hereden).
   Regla del sistema: ningún color hex/oklch crudo fuera de este archivo.
   ============================================================================ */

:root {
  /* --- superficies: paleta fría, sin beige/crema/dorado -------------------- */
  --bg:          oklch(16% 0.045 268);
  --bg-deep:     oklch(10% 0.036 268);
  --surface:     oklch(23% 0.048 268);
  --surface-2:   oklch(29% 0.050 270);
  --surface-3:   oklch(35% 0.050 272);
  --fg:          oklch(97% 0.008 260);
  --muted:       oklch(73% 0.028 265);
  --border:      oklch(39% 0.045 270);
  --border-soft: oklch(30% 0.040 270);

  /* --- acción -------------------------------------------------------------- */
  --accent:      oklch(80% 0.145 205);   /* cian eléctrico: color primario     */
  --accent-hi:   oklch(88% 0.120 200);
  --accent-ink:  oklch(18% 0.060 235);   /* texto sobre cian                   */
  --accent-2:    oklch(86% 0.190 132);   /* lima: acento secundario / premio   */

  /* --- la hoja del álbum ---------------------------------------------------
     Referencia: página de álbum impreso. Fondo de página saturado, slots casi
     blancos, tinta oscura. Azul, no crema: mantiene la piel fría del producto. */
  --sheet:      oklch(52% 0.155 252);
  --sheet-2:    oklch(44% 0.150 254);
  --sheet-ink:  oklch(98% 0.010 250);
  --slot:       oklch(97% 0.006 250);
  --slot-2:     oklch(92% 0.010 250);
  --slot-line:  oklch(87% 0.018 250);
  --ink:        oklch(26% 0.040 258);
  --ink-soft:   oklch(52% 0.030 258);

  /* --- rarezas ------------------------------------------------------------- */
  --r-common:    oklch(66% 0.020 260);
  --r-rare:      oklch(78% 0.140 210);
  --r-epic:      oklch(66% 0.190 300);
  --r-legend-a:  oklch(84% 0.150 190);
  --r-legend-b:  oklch(70% 0.200 320);
  --r-legend-c:  oklch(88% 0.180 130);

  /* --- estado -------------------------------------------------------------- */
  --ok:          oklch(80% 0.160 145);
  --warn:        oklch(85% 0.150 90);
  --danger:      oklch(67% 0.190 22);

  /* --- tipografía (sin Google Fonts: stacks del sistema) ------------------- */
  --font-display: ui-rounded, 'SF Pro Rounded', 'Baloo 2', 'Nunito', 'Poppins',
                  'Segoe UI Variable', system-ui, sans-serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.40vw, 2.60rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.75vw, 3.80rem);

  /* --- forma --------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --shadow-1: 0 1px 2px oklch(8% 0.04 268 / .5), 0 4px 14px oklch(8% 0.04 268 / .35);
  --shadow-2: 0 8px 30px oklch(8% 0.04 268 / .55);
  --shadow-glow: 0 0 0 1px oklch(80% 0.145 205 / .35), 0 0 28px oklch(80% 0.145 205 / .28);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* --- el chrome, como tokens ----------------------------------------------
     La barra, el rail, el fondo del panel y el velo del modal estaban escritos
     con oklch crudo adentro de components.css. Mientras hubo un solo tema eso
     era sólo una regla rota; con dos temas es un bug: son exactamente las
     cuatro superficies que tienen que darse vuelta. */
  --bg-blur:   oklch(16% 0.045 268 / .78);   /* barra superior, translúcida */
  --rail-bg:   oklch(13% 0.042 268 / .92);   /* rail y tab bar              */
  --panel-2:   oklch(21% 0.046 268);         /* fondo bajo del panel        */
  --scrim:     oklch(8% 0.03 268 / .78);     /* velo detrás del modal       */

  --nav-h: 68px;             /* alto de la tab bar en móvil        */
  --rail-w: 236px;           /* rail expandido en desktop          */
  --rail-w-collapsed: 76px;  /* rail contraído: sólo iconos        */
  --maxw: 1240px;
}

/* ── Tema claro ───────────────────────────────────────────────────────────────
   SE DA VUELTA EL CHROME, NO EL ÁLBUM. La hoja, los huecos y las figuritas son
   papel impreso: un álbum de kiosco no cambia de color porque afuera sea de
   día. Lo que se invierte es lo que rodea al álbum —fondo, barra, rail,
   paneles, modales, texto—, que es la parte que de verdad molesta a las 3 de la
   tarde contra una ventana. Por eso acá no aparecen `--sheet`, `--slot`,
   `--ink` ni las rarezas: son los mismos tokens en los dos temas, y esa
   ausencia es la decisión de diseño.

   EL ACENTO SÍ CAMBIA, y no por gusto: el cian a 80% de luz es perfecto sobre
   índigo y es ilegible sobre blanco (2,1:1). En claro baja a 52% —mismo tono,
   otra luz— y pasa a 6:1 como texto y a 8:1 como botón con tinta blanca.

   Lo escribe `js/tema.js` en <html data-tema>, antes del primer pintado. */
[data-tema="claro"] {
  --bg:          oklch(96.5% 0.006 250);
  --bg-deep:     oklch(99% 0.003 250);
  --surface:     oklch(100% 0 0);
  --surface-2:   oklch(97.5% 0.005 250);
  --surface-3:   oklch(94% 0.010 252);
  --fg:          oklch(26% 0.035 262);
  --muted:       oklch(47% 0.025 262);
  --border:      oklch(87% 0.012 255);
  --border-soft: oklch(92% 0.008 255);

  --accent:      oklch(52% 0.145 240);
  --accent-hi:   oklch(45% 0.150 240);
  --accent-ink:  oklch(99% 0.004 250);
  --accent-2:    oklch(48% 0.150 148);

  --bg-blur:     oklch(100% 0 0 / .82);
  --rail-bg:     oklch(99% 0.003 250 / .94);
  --panel-2:     oklch(97% 0.006 252);
  --scrim:       oklch(30% 0.03 262 / .42);

  /* En claro la sombra no puede ser negro al 55%: sobre papel eso es un manchón.
     Misma forma, tinta azulada y mucha menos opacidad. */
  --shadow-1: 0 1px 2px oklch(30% 0.03 262 / .10), 0 4px 14px oklch(30% 0.03 262 / .10);
  --shadow-2: 0 8px 30px oklch(30% 0.03 262 / .16);
  --shadow-glow: 0 0 0 1px oklch(52% 0.145 240 / .30), 0 0 24px oklch(52% 0.145 240 / .18);
}

/* El estado del menú vive en <html> para que el ancho del rail esté resuelto
   antes del primer pintado (sin salto de layout). Lo escribe Kairo.initNavState(). */
html[data-nav-state="collapsed"] { --rail-w: var(--rail-w-collapsed); }

/* --- reset mínimo ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` gana siempre. El estilo del navegador es `display:none` con
   especificidad cero, así que cualquier `.clase { display:flex }` lo pisa y el
   elemento queda visible aunque el JS le haya puesto `hidden`. Nos pasó con la
   barra de pendientes y con el paginador del álbum. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 78% -8%,  oklch(34% 0.09 258 / .55), transparent 62%),
    radial-gradient(900px 540px at 6% 104%,   oklch(31% 0.10 300 / .40), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  text-wrap: pretty;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* scrollbar fría */
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }

/* --- utilidades ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.stack { display: grid; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hide-mobile { display: none; }
@media (min-width: 960px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}