/*
 * IDENTIDAD VISUAL
 * ============================================================================
 * Este archivo es la identidad del sitio. Colores, tipografias, ritmo y medidas
 * viven aca y en ningun otro lado: base.css y story.css solo consumen variables.
 *
 * Iterar la marca deberia ser editar este archivo y nada mas.
 *
 * Direccion: editorial y sobria. Papel calido, tinta casi negra, un solo acento
 * (rojo oxido) y mucho aire. Sin degradados decorativos, sin sombras dramaticas.
 */

:root {
  color-scheme: light dark;

  /* --- Color: tema claro -------------------------------------------------
     El fondo no es blanco puro: un papel levemente calido cansa menos en
     sesiones largas y le da al texto un aspecto impreso. */
  --color-bg: #faf8f5;
  --color-surface: #ffffff;
  --color-surface-sunken: #f2efe9;
  --color-text: #1a1917;
  --color-text-muted: #6a645c;
  --color-border: #e4ded4;
  --color-border-strong: #cfc7b9;
  /* El rojo es el del logotipo, no un rojo parecido: si la marca y la interfaz
     usan dos rojos distintos, el header siempre se ve pegado encima de la
     pagina en vez de formar parte de ella. */
  --color-accent: #a6201c;
  --color-accent-hover: #861815;
  --color-accent-contrast: #fffaf7;
  --color-focus: #a6201c;

  /* Dorado envejecido. Es el detalle, no el acento: filetes, versalitas y el
     sello de "gratis". Nunca un boton, nunca un parrafo. Son dos tonos porque
     el que tiene contraste suficiente para texto chico es demasiado oscuro para
     una linea de un pixel. */
  --color-gold: #85662f;
  --color-gold-line: #c4ab7a;
  /* El disco detras de la portada del destacado. Es un token propio porque en
     oscuro NO puede ser el acento: el acento sube de luminosidad para poder ser
     texto, y una mancha de ese rosa del tamano de una tapa seria lo primero que
     se ve de la pagina. */
  --color-hero-disc: #a6201c;
  /* Velo sobre la portada del hero, para que el texto encima sea legible. */
  --color-cover-veil: rgb(26 25 23 / 4%);

  /* --- Tipografia --------------------------------------------------------
     Stack de sistema a proposito: cero webfonts, cero FOUT, cero requests.
     Cuando haya una fuente propia se cambia aca y el resto no se entera. */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-reading: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
    "Times New Roman", serif;
  --font-display: var(--font-reading);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipografica. `clamp` para que el salto a desktop sea continuo y no
     un escalon en un breakpoint. */
  --size-micro: 0.75rem;
  --size-small: 0.875rem;
  --size-body: 1rem;
  --size-reading: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  /* El titular de la home. Es el unico tamano que existe solo para una pieza:
     el hero tiene que ganarle a la portada que tiene al lado. El techo esta
     puesto para que "Misterios para leer gratis" entre en dos lineas dentro de
     su columna; mas grande y "para" queda colgando solo en un renglon. */
  --size-hero: clamp(2.25rem, 1.35rem + 3.6vw, 3.5rem);
  --size-title: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  --size-chapter: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --size-card-title: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  /* Escala del cuerpo del relato, que el lector puede cambiar desde la barra
     (ver prefs.js). Multiplica a --size-reading y solo dentro del capitulo: el
     resto de la interfaz no cambia de tamano porque alguien quiera leer mas
     grande. 1 es el tamano de diseno. */
  --reading-scale: 1;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.55;
  --leading-reading: 1.72;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* --- Medidas -----------------------------------------------------------
     --reading-width es la decision mas importante del sitio: ~66 caracteres
     por linea con la serif del sistema. Si se cambia la tipografia hay que
     recalcularla, no heredarla. */
  --reading-width: 37rem;
  --content-width: 72rem;
  --prose-width: 44rem;

  /* --- Ritmo vertical -----------------------------------------------------
     La mitad baja (1-4) es espaciado interno y no se toca: son los milimetros
     entre una etiqueta y su dato. La mitad alta separa bloques, y ahi la escala
     es deliberadamente corta: el aire que ordena una pagina es el de los
     margenes laterales y el interlineado, no huecos de siete centimetros entre
     secciones. Apretar aca de mas es lo que convierte una pagina sobria en una
     pagina vacia. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;
  --space-7: 2.25rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* --- Formas ------------------------------------------------------------- */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-pill: 999px;
  --cover-ratio: 3 / 4;
  --cover-ratio-wide: 16 / 9;

  /* Una sola sombra en todo el sitio, y apenas perceptible: la jerarquia la
     dan el espacio y la tipografia, no la profundidad. */
  --shadow-cover: 0 1px 2px rgb(26 25 23 / 8%), 0 12px 32px rgb(26 25 23 / 8%);

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/*
 * Los tres temas.
 *
 * Por defecto manda el sistema. Si el lector elige uno desde la barra del
 * lector, `prefs-boot.js` escribe `data-theme` en <html> ANTES del primer
 * pintado, y ese atributo gana: el `:not([data-theme])` de la media query es lo
 * que hace que una eleccion explicita no la pise la preferencia del sistema.
 *
 * Los valores de cada paleta se escriben UNA vez, arriba, y los selectores solo
 * los asignan. Asi el tema oscuro no puede quedar distinto segun se llegue por
 * la media query o por el atributo.
 *
 * `color-scheme` va junto con la paleta, no aparte: es lo que le dice al
 * navegador de que color pintar la barra de scroll, los campos y el fondo de la
 * pagina antes de que cargue el CSS.
 */

:root {
  /* Oscuro: no es el claro invertido. Gris carbon con temperatura calida (no
     negro puro, que genera halos en texto serif), texto en blanco roto para que
     no vibre, y el acento SUBE de luminosidad porque el rojo de la marca sobre
     carbon no llegaria a contraste AA. */
  --carbon-bg: #131214;
  --carbon-surface: #1b1a1d;
  --carbon-sunken: #201f23;
  --carbon-text: #e9e5de;
  --carbon-muted: #a09a92;
  --carbon-border: #2e2c31;
  --carbon-border-strong: #45424a;
  --carbon-accent: #e8776a;
  --carbon-accent-hover: #f09287;
  --carbon-accent-contrast: #1c110e;
  --carbon-gold: #c9a961;
  --carbon-gold-line: #6b5a34;
  --carbon-disc: #5e1714;

  /* Sepia: papel viejo. No es "el claro un poco mas amarillo": el contraste
     baja a proposito —tinta marron sobre crema— porque de eso se trata, de
     quitarle blanco a la pantalla de noche sin apagarla del todo. Aun asi el
     texto sobre el fondo da 10:1, muy por encima de AA. */
  --sepia-bg: #f4ecd8;
  --sepia-surface: #fbf5e6;
  --sepia-sunken: #eae0c8;
  --sepia-text: #3b3227;
  --sepia-muted: #7a6a53;
  --sepia-border: #ddd0b2;
  --sepia-border-strong: #c9b894;
  --sepia-accent: #9a2b22;
  --sepia-accent-hover: #7d211a;
  --sepia-gold: #7d6329;
  --sepia-gold-line: #c2a86f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: var(--carbon-bg);
    --color-surface: var(--carbon-surface);
    --color-surface-sunken: var(--carbon-sunken);
    --color-text: var(--carbon-text);
    --color-text-muted: var(--carbon-muted);
    --color-border: var(--carbon-border);
    --color-border-strong: var(--carbon-border-strong);
    --color-accent: var(--carbon-accent);
    --color-accent-hover: var(--carbon-accent-hover);
    --color-accent-contrast: var(--carbon-accent-contrast);
    --color-focus: var(--carbon-accent);
    --color-cover-veil: rgb(0 0 0 / 20%);
    --color-gold: var(--carbon-gold);
    --color-gold-line: var(--carbon-gold-line);
    --color-hero-disc: var(--carbon-disc);
    --shadow-cover: 0 12px 32px rgb(0 0 0 / 45%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--carbon-bg);
  --color-surface: var(--carbon-surface);
  --color-surface-sunken: var(--carbon-sunken);
  --color-text: var(--carbon-text);
  --color-text-muted: var(--carbon-muted);
  --color-border: var(--carbon-border);
  --color-border-strong: var(--carbon-border-strong);
  --color-accent: var(--carbon-accent);
  --color-accent-hover: var(--carbon-accent-hover);
  --color-accent-contrast: var(--carbon-accent-contrast);
  --color-focus: var(--carbon-accent);
  --color-cover-veil: rgb(0 0 0 / 20%);
  --color-gold: var(--carbon-gold);
  --color-gold-line: var(--carbon-gold-line);
  --color-hero-disc: var(--carbon-disc);
  --shadow-cover: 0 12px 32px rgb(0 0 0 / 45%);
}

:root[data-theme="sepia"] {
  color-scheme: light;
  --color-bg: var(--sepia-bg);
  --color-surface: var(--sepia-surface);
  --color-surface-sunken: var(--sepia-sunken);
  --color-text: var(--sepia-text);
  --color-text-muted: var(--sepia-muted);
  --color-border: var(--sepia-border);
  --color-border-strong: var(--sepia-border-strong);
  --color-accent: var(--sepia-accent);
  --color-accent-hover: var(--sepia-accent-hover);
  --color-focus: var(--sepia-accent);
  --color-cover-veil: rgb(59 50 39 / 6%);
  --color-gold: var(--sepia-gold);
  --color-gold-line: var(--sepia-gold-line);
  --color-hero-disc: var(--sepia-accent);
  --shadow-cover: 0 1px 2px rgb(59 50 39 / 10%), 0 12px 32px rgb(59 50 39 / 12%);
}

/* "Claro" no necesita declarar nada: la paleta clara ya es la de :root, y el
   :not([data-theme]) de la media query hace que la preferencia del sistema no
   la pise. Si un dia hiciera falta forzar algo, va aca. */
:root[data-theme="light"] {
  color-scheme: light;
}

/*
 * Tamano del texto del relato.
 *
 * Cinco pasos y nada de tipografia fluida extra: multiplica al --size-reading
 * que ya calcula el clamp, asi que la escala sigue siendo continua con el ancho
 * de la ventana. El 3 es el tamano de diseno y por eso no declara nada.
 */
:root[data-text-size="1"] {
  --reading-scale: 0.88;
}

:root[data-text-size="2"] {
  --reading-scale: 0.94;
}

:root[data-text-size="4"] {
  --reading-scale: 1.09;
}

:root[data-text-size="5"] {
  --reading-scale: 1.2;
}