/* ==========================================================================
   ArgPoética · Tokens de diseño
   Fuente: Manual de marca v1.0 (2026).
   --------------------------------------------------------------------------
   Layout: papel de fondo para que el poema respire; el celeste aparece en
   bloques "bandera" (cabecera del mail, banda de suscripción) y el sol solo
   en detalles (subrayados, guiones, el mapa).

   Proporción sugerida por el manual:
     Papel 50% · Celeste 25% · Tinta 20% · Sol 5%

   Contrastes (WCAG, del manual):
     Tinta sobre Papel ........... 14.7:1  texto de lectura
     Tinta sobre Celeste .......... 6.6:1  texto sobre celeste
     Celeste profundo sobre Papel . 6.2:1  enlaces
     Blanco o Sol sobre Celeste ... solo en el logo (nunca texto ni botones)

   Todo color de la interfaz sale de estos tokens. El tema oscuro solo
   redefine valores; los componentes nunca usan colores literales.
   ========================================================================== */

:root {
  /* ---- Paleta de marca (fija en ambos temas) ---------------------------- */
  --celeste: #72a9df;          /* Principal */
  --celeste-profundo: #1f5c99; /* Enlaces y UI */
  --sol: #fab43a;              /* Acento: solo detalles */
  --tinta: #231f20;            /* Texto y negativo */
  --papel: #f7f3ea;            /* Fondo de lectura */
  --blanco: #ffffff;

  /* ---- Roles de interfaz (tema claro) ----------------------------------- */
  --bg: var(--papel);
  --surface: #ffffff;          /* tarjetas, como en la maqueta del manual */
  --surface-2: #ebe7de;        /* marco de la bandeja de entrada */
  --fg: var(--tinta);
  --muted: #5d5552;            /* tinta aclarada, 6.6:1 sobre papel */
  --border: #e3dccd;
  --border-strong: #b9ae9c;
  --link: var(--celeste-profundo);
  --label: var(--celeste-profundo);
  --btn-bg: var(--tinta);
  --btn-fg: var(--papel);
  --focus: var(--celeste-profundo);
  --ok: #2b6b45;
  --error: #b3261e;

  /* Logo según el fondo: Positivo en claro, Negativo en oscuro */
  --logo-positivo: block;
  --logo-negativo: none;

  /* Ícono del botón de tema: muestra el modo al que se pasa */
  --icon-moon: block;
  --icon-sun: none;

  /* ---- Tipografía (manual, pág. 06) ------------------------------------- */
  --font-brand: "IM Fell English", Georgia, "Times New Roman", serif; /* solo logo y portadas */
  --font-text: "Lora", Georgia, "Times New Roman", serif;

  --fs-cover: clamp(2.75rem, 1.7rem + 4.2vw, 4.75rem); /* titular de portada (IM Fell) */
  --fs-h1: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);        /* SemiBold 40/48 */
  --lh-h1: 1.2;
  --fs-h2: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);    /* SemiBold 28/36 */
  --lh-h2: 1.29;
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* Regular 19/32 */
  --lh-body: 1.68;
  --fs-meta: 0.9375rem;                                 /* Italic 15/22 */
  --lh-meta: 1.47;
  --fs-label: 0.8125rem;                                /* SemiBold 13, +0.15em */
  --ls-label: 0.15em;
  --fs-small: 0.875rem;

  /* ---- Espaciado y forma ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(35, 31, 32, 0.06), 0 12px 32px -20px rgba(35, 31, 32, 0.35);
  --wrap: 72rem;
  --measure: 38rem; /* 60 a 70 caracteres por línea */
}

/* Tema oscuro por preferencia del sistema (salvo que se elija claro).
   El manual indica la versión Negativo del logo para modo oscuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1819;
    --surface: #262223;
    --surface-2: #2f2a2b;
    --fg: var(--papel);
    --muted: #bbb2a7;
    --border: #3b3536;
    --border-strong: #5d5552;
    --link: #93c0ec;
    --label: #93c0ec;
    --btn-bg: var(--papel);
    --btn-fg: var(--tinta);
    --focus: #93c0ec;
    --ok: #86c9a0;
    --error: #f2948c;
    --logo-positivo: none;
    --logo-negativo: block;
    --icon-moon: none;
    --icon-sun: block;
    --shadow-card: 0 12px 32px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* Tema oscuro elegido explícitamente (mismos valores) */
:root[data-theme="dark"] {
  --bg: #1b1819;
  --surface: #262223;
  --surface-2: #2f2a2b;
  --fg: var(--papel);
  --muted: #bbb2a7;
  --border: #3b3536;
  --border-strong: #5d5552;
  --link: #93c0ec;
  --label: #93c0ec;
  --btn-bg: var(--papel);
  --btn-fg: var(--tinta);
  --focus: #93c0ec;
  --ok: #86c9a0;
  --error: #f2948c;
  --logo-positivo: none;
  --logo-negativo: block;
  --icon-moon: none;
  --icon-sun: block;
  --shadow-card: 0 12px 32px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}