/**
 * Design tokens como variables CSS.
 * Debe mantenerse alineado con js/tailwind-config.js (misma paleta,
 * radios y sombras). Se usa para estilos que Tailwind no cubre:
 * el service worker, gráficas SVG, estados de foco personalizados, etc.
 */
:root {
  /* Color */
  --color-bg: #FDFBF7;
  --color-bg-raised: #FFFFFF;
  --color-stone-150: #EFE7D8;
  --color-stone-250: #E3D8C4;
  --color-ink: #2B2622;
  --color-ink-soft: #57504A;
  --color-ink-faint: #8A8177;
  --color-sage-100: #E1EBDC;
  --color-sage-500: #6E8F6A;
  --color-sage-600: #5C7A59;
  --color-gold-400: #CBA765;
  --color-clay-400: #C98F6D;
  --color-neutral-400: #A39B8F;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado (escala base 4px, generosa en tarjetas) */
  --space-card-padding: 1.5rem;
  --space-section-gap: 2rem;

  /* Radios */
  --radius-card: 1.5rem;
  --radius-control: 0.875rem;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-soft: 0 2px 10px rgba(43, 38, 34, 0.05);
  --shadow-lifted: 0 10px 30px rgba(43, 38, 34, 0.08);

  /* Animación */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #211E1A;
    --color-bg-raised: #2A2621;
    --color-stone-150: #3A352E;
    --color-stone-250: #443E35;
    --color-ink: #F3EFE8;
    --color-ink-soft: #CFC7BA;
    --color-ink-faint: #948B7E;
    --color-sage-100: #2E3A2C;
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-lifted: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}