/*
 * Epílogo — Design Tokens
 * "Tu cuaderno de lectura." — sistema de diseño cálido, táctil, papel.
 * Versión 2.0.0 (rediseño Bitácora Natural)
 *
 * Identidad: diario de lectura analógico. Pergamino + avena, oliva como
 * acción, terracota como acento. Titulares Ovo, cuerpo Golos Text,
 * lectura Literata. Radios generosos (24px), botones pill, grano de papel.
 * Tema único claro (no hay modo oscuro en esta versión).
 */

@import url('https://fonts.googleapis.com/css2?family=Ovo&family=Golos+Text:wght@400;500;600;700&family=Literata:ital,opsz,wght@0,7..72,300..700;1,7..72,300..600&display=swap');

:root {
  /* === COLORES (paleta pergamino) === */

  /* Primario (acción) — Oliva */
  --primary: #6E8B5E;
  --primary-hover: #617A53;
  --primary-pressed: #586F4B;
  --primary-light: rgba(110, 139, 94, 0.10);
  --primary-20: rgba(110, 139, 94, 0.20);
  --primary-30: rgba(110, 139, 94, 0.30);

  /* Acento — Terracota (FAB, destacados, notificaciones) */
  --accent: #C47C5A;
  --accent-hover: #B07051;
  --accent-pressed: #A1664A;
  --accent-light: rgba(196, 124, 90, 0.12);
  /* Alias de compatibilidad con el sistema anterior */
  --secondary: var(--accent);
  --secondary-hover: var(--accent-hover);
  --secondary-pressed: var(--accent-pressed);

  /* Superficies (nada de blanco ni negro puros) */
  --parchment: #faf6f3;   /* fondo app */
  --oat: #F4F1EA;         /* tarjetas, inputs, modales */
  --oat-deep: #ECE7DC;    /* hover / elementos destacados */

  /* Texto */
  --charcoal: #2C2A25;    /* titulares y cuerpo */
  --taupe: #8C857B;       /* secundario, iconos inactivos */
  --taupe-soft: #A8A095;  /* terciario */

  /* Estados (tonos cálidos) */
  --success: #5B8C5A;
  --warning: #E0A458;
  --error: #C5544A;

  /* Grises (se conservan para compat; tendiendo a cálido) */
  --gray-50: #FAF8F4;
  --gray-100: #F4F1EA;
  --gray-200: #E5E0D8;
  --gray-300: #D8D2C7;
  --gray-400: #A8A095;
  --gray-500: #8C857B;
  --gray-600: #6E685F;
  --gray-700: #4D4A43;
  --gray-800: #34322C;
  --gray-900: #2C2A25;

  /* === TIPOGRAFÍA === */
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-headings: 'Ovo', Georgia, 'Times New Roman', serif;
  --font-serif: var(--font-headings);          /* alias compat */
  --font-reading: 'Literata', Georgia, serif;  /* texto largo / citas */

  /* Tamaños */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.75rem;    /* 28px */
  --text-4xl: 2rem;       /* 32px */

  /**
   * El ancho de la columna del mes en la Huella de Libros leídos.
   *
   * Vive aquí y no junto a `.mes__nombre` porque lo comparten las DOCE
   * tarjetas: si estuviera dentro de una, los años seguirían sin alinearse
   * entre ellas. Tiene que caber SEPTIEMBRE, que es el más largo; sobra a
   * propósito, porque de más solo se gana separación y de menos se descuadra
   * el año entero.
   */
  --ancho-mes: 13ch;

  /* Pesos */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 700;

  /* Line height */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --leading-loose: 2;

  /* === ESPACIADO === */
  --space-1: 0.25rem;   --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;      --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;      --space-10: 2.5rem;  --space-12: 3rem;  --space-16: 4rem;

  /* === BORDER RADIUS (redondo y orgánico) === */
  --radius-sm: 0.75rem;   /* 12px */
  --radius-md: 1rem;      /* 16px */
  --radius-lg: 1.5rem;    /* 24px — tarjetas e inputs */
  --radius-xl: 2rem;      /* 32px */
  --radius-card: 1.5rem;  /* 24px */
  --radius-button: 100px; /* pill */
  --radius-full: 9999px;

  /* === ELEVACIÓN (sombras suaves, cálidas) === */
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(44, 42, 37, 0.05);
  --shadow-md: 0 4px 16px rgba(44, 42, 37, 0.07);
  --shadow-lg: 0 8px 24px rgba(44, 42, 37, 0.08);
  --shadow-xl: 0 16px 40px rgba(44, 42, 37, 0.12);
  --shadow-soft: 0 8px 24px rgba(44, 42, 37, 0.08);
  --shadow-primary: 0 8px 20px rgba(110, 139, 94, 0.20);

  /* === MOTION === */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* === TOQUE === */
  --touch-min: 48px;

  /* === BREAKPOINTS === */
  --breakpoint-sm: 640px;  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px; --breakpoint-xl: 1280px;

  /* === Z-INDEX === */
  --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30;
  --z-modal-backdrop: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70;
}

/*
 * TEMA ÚNICO CLARO (pergamino).
 * Mapeamos los nombres semánticos que ya usan componentes y páginas a la
 * paleta nueva. `.dark` y `.light` resuelven AMBOS al mismo tema claro para
 * que cualquier toggle heredado no rompa el aspecto durante la migración.
 */
:root,
.light,
.dark {
  --bg-dark: var(--parchment);
  --bg-light: var(--parchment);
  --bg-primary: var(--parchment);
  --bg-secondary: var(--oat);
  --bg-tertiary: var(--oat-deep);

  --text-primary: var(--charcoal);
  --text-secondary: var(--taupe);
  --text-tertiary: var(--taupe-soft);
  --text-on-dark: var(--charcoal);
  --text-on-light: var(--charcoal);
  --text-muted-dark: var(--taupe);
  --text-muted-light: var(--taupe);

  --border-color: #E5E0D8;
  --border-light: #EFEBE3;
  --backdrop-blur: blur(8px);

  --icon-primary: var(--charcoal);
  --icon-secondary: var(--taupe);
  --button-bg: var(--oat);
  --button-hover: var(--oat-deep);
}

/* === RESET Y BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  transition: background-color var(--duration-base) var(--ease-out-quad);
}

/* Titulares en Ovo (serif con carácter de imprenta) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

/* Grano de papel sutil sobre toda la app (textura analógica) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* === UTILIDADES === */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.font-headings { font-family: var(--font-headings); }
.font-reading  { font-family: var(--font-reading); }

.container {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--space-4); padding-right: var(--space-4);
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }