/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS  ·  historia #13
   Ningún color se escribe a mano fuera de este archivo.

   Un tema (src/themes.js) reemplaza SOLO los tokens base de
   abajo. Todo lo derivado se recalcula solo, así que un tema
   nuevo son ~14 valores, no 60.

   Los colores base van dos veces: como hex (para usarlos
   directos) y como tripleta RGB (para poder darles opacidad
   con rgb(var(--x-rgb) / .3)). Es lo que permite que las
   transparencias sigan al tema en vez de quedarse fijas.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── BASE · lo que cada tema reemplaza ───────────────────── */
  --void: #0D0A1A;        --void-rgb: 13 10 26;        /* fondo más profundo */
  --deep: #13102B;        --deep-rgb: 19 16 43;        /* superficie */
  --dusk: #1E1840;        --dusk-rgb: 30 24 64;        /* superficie elevada */
  --purple: #6C3FC5;      --purple-rgb: 108 63 197;    /* acento primario */
  --violet: #9B6EE8;      --violet-rgb: 155 110 232;   /* acento secundario */
  --lilac: #C4A8FF;       --lilac-rgb: 196 168 255;    /* acento claro */
  --gold: #F0C060;        --gold-rgb: 240 192 96;      /* realce */
  --amber: #D4943A;       --amber-rgb: 212 148 58;     /* realce secundario */
  --parchment: #F5EDD8;
  --text: #EDE8F5;        --text-rgb: 237 232 245;

  /* estado — semánticos, no son el acento */
  --success: #7EC8A0;     --success-rgb: 126 200 160;
  --success-deep: #2E7D32;
  --danger: #FF8A8A;      --danger-rgb: 255 138 138;

  /* ── TIPOGRAFÍA ──────────────────────────────────────────── */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  /* LA LETRA DE LA TAPA, y solo de la tapa. Vive aquí, en una regla de
     hoja de estilos y no en los tokens de un tema, porque
     `applyTheme` limpia los tokens en línea al cambiar de tema: puesta
     aquí sobrevive a los once y un tema que quiera otra solo tiene que
     declararla. Por qué Playball, en src/themes.js. */
  --font-portada: 'Playball', 'Fraunces', Georgia, cursive;
  --portada-weight: 400;
  --display-spacing: 1px;
  --display-transform: none;
  --display-weight: 400;
  --label-transform: uppercase;
  --label-spacing: 2px;

  /* ── FORMA · qué tan blandas o duras son las esquinas ─────
     Un tema que solo cambia el color se siente la misma app
     pintada distinta. La forma es la mitad del carácter. */
  --card-radius: 14px;
  --ctl-radius: 10px;
  --chip-radius: 8px;
  --pill-radius: 20px;
  --sheet-radius: 24px 24px 0 0;
  --rune-radius: 8px;

  /* Alias por rol. Las pantallas nuevas piden el radio por lo que es
     la pieza —una tarjeta, un control— y así siguen a cada tema sin
     repetir el nombre exacto del token. */
  --radius: var(--card-radius);
  --radius-sm: var(--ctl-radius);
  --radius-lg: calc(var(--card-radius) + 8px);

  /* Cuánto del color del mes tiñe la interfaz. Un tema estricto
     lo baja a 0 y recupera su propia paleta. */
  --month-tint: 30%;
  --rune-tint: 100%;

  /* ── MATERIAL · de qué está hecha una superficie ──────────
     Borde, relleno y sombra van juntos: son una decisión, no tres. */
  --hairline: 1px solid var(--border);
  --card-bg: var(--card);
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --card-shadow-hover: 0 8px 28px rgb(var(--purple-rgb) / .28);
  --card-edge: none;              /* luz en el filo superior */
  --cover-frame: none;            /* marco de las portadas */
  --sheet-bg: var(--card-solid);

  /* ── TEXTURA · la capa que se superpone a todo ────────────
     Vellum, papel, grano de película, rejilla, líneas de barrido. */
  --texture: none;
  --texture-size: auto;
  --texture-opacity: 0;
  --texture-blend: normal;

  /* ── LA ENCUADERNACIÓN · de qué está hecho un lomo ────────
     Un libro sin portada se dibuja como su lomo (ver src/lomo.js), y
     eso también es tema: en Máquina no hay tela ni pan de oro, en
     Pergamino los lomos van sobre papel claro y no pueden ser negros.

     Son OCHO telas porque a cada género le toca siempre la misma, así
     que la estantería se lee de un vistazo aunque no distingas ningún
     título. Un color por libro sería decoración; un color por género
     es información — y por eso los ocho tienen que distinguirse entre
     sí Y del fondo, en los once temas. Lo comprueba
     `npm run test:contrast`. */
  --tela-1: #5C2A30;   /* burdeos */
  --tela-2: #5A3524;   /* teja */
  --tela-3: #5A4526;   /* ocre */
  --tela-4: #3E4429;   /* oliva */
  --tela-5: #26402F;   /* bosque */
  --tela-6: #2C3C44;   /* pizarra */
  --tela-7: #2C3550;   /* marino */
  --tela-8: #42304A;   /* ciruela */

  --lomo-filete: var(--gold);      /* los dos filetes y el título estampado */
  --lomo-canto: var(--lilac);      /* el canto de las hojas */
  --lomo-radio: 1px;
  /* La luz sobre el lomo: la sombra del canto interior y el brillo del
     borde. Un tema plano la apaga entera. */
  --lomo-luz: linear-gradient(90deg,
    rgb(0 0 0 / .34) 0 6%, rgb(255 255 255 / .06) 16%,
    transparent 42%, rgb(0 0 0 / .22) 100%);
  --lomo-sombra: 0 2px 8px rgb(0 0 0 / .5);

  /* El botón de añadir. Va aparte porque en un tema claro no puede
     salir del mismo sitio que en uno oscuro: `--dusk` es la superficie
     elevada, y elevada sobre crema es casi crema. */
  --fab-bg: var(--dusk);
  --fab-color: var(--gold);
  --fab-borde: rgb(var(--gold-rgb) / .45);

  /* ── ORNAMENTO · la marca que separa y remata ─────────────
     Cada mundo tiene su signo: ❧ para el grimorio, [ ] para
     la terminal, nada para la obsidiana. */
  --ornament: '';
  --ornament-color: var(--gold);
  --rule-line: linear-gradient(90deg, transparent, var(--border), transparent);
  --rule-height: 1px;
  --vignette: none;

  /* ── ATMÓSFERA · un tema puede apagarla ──────────────────── */
  --stars-opacity: 1;
  --orbs-opacity: 1;
  --grid-opacity: 1;
  --glow-strength: 1;
  --bg-wash:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgb(var(--purple-rgb) / .25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgb(var(--dusk-rgb) / .8) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, var(--void) 40%, var(--deep) 100%);

  /* ── DERIVADOS · se recalculan solos con cada tema ───────── */
  --fog: rgb(var(--lilac-rgb) / .12);
  --fog-soft: rgb(var(--lilac-rgb) / .06);
  --fog-faint: rgb(var(--lilac-rgb) / .03);
  --glow: rgb(var(--purple-rgb) / .35);
  --muted: rgb(var(--text-rgb) / .5);
  --muted-soft: rgb(var(--text-rgb) / .35);
  --border: rgb(var(--lilac-rgb) / .15);
  --border-soft: rgb(var(--lilac-rgb) / .08);
  --border-strong: rgb(var(--lilac-rgb) / .3);
  --card: rgb(var(--deep-rgb) / .85);
  --card-solid: rgb(var(--deep-rgb) / .96);
  --scrim: rgb(0 0 0 / .7);
  --shade: rgb(0 0 0 / .5);
  --accent-wash: linear-gradient(135deg, rgb(var(--purple-rgb) / .4), rgb(var(--violet-rgb) / .2));
  --gold-wash: rgb(var(--gold-rgb) / .12);
  --success-wash: rgb(var(--success-rgb) / .18);
  --role-anchor: var(--gold);
  --role-short: var(--violet);
  --danger-wash: rgb(var(--danger-rgb) / .18);
}

/* Quien pida menos movimiento, no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}