/* ============================================================================
   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);

  --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;
}

/* 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;
  }
}