/* ---------------------------------------------------------------------------
   Tokens de diseño del sitio público.
   Única fuente de verdad para color, tipografía, espaciado y elevación.
   Los componentes (app.css) nunca declaran valores literales de marca.
--------------------------------------------------------------------------- */

:root {
  /* Color: neutros de marca */
  --ink: #2e2321;           /* texto principal */
  --muted: #857471;         /* texto secundario */
  --paper: #fffdfa;         /* fondo base */
  --cream: #f7f1ea;         /* fondo de sección suave */
  --sand: #ecdfd2;          /* superficies decorativas */
  --line: #e6d9cd;          /* bordes y separadores */
  --line-soft: #f0e6dc;

  /* Color: acentos de marca */
  --rose: #dca894;
  --rose-soft: #f2dcd0;
  --copper: #a95f4d;        /* acento principal */
  --copper-dark: #8e4a3a;   /* hover del acento */
  --cocoa: #6d443b;
  --dark: #3b2523;          /* fondos oscuros */
  --dark-soft: #513430;

  /* Color: utilitarios */
  --whatsapp: #25a06f;
  --whatsapp-dark: #1d8259;
  --on-dark: #f6e9e0;
  --on-dark-muted: #c6afa6;

  /* Tipografía */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.688rem;   /* 11px */
  --fs-small: 0.813rem;     /* 13px */
  --fs-body: 0.938rem;      /* 15px */
  --fs-lead: 1.125rem;      /* 18px */
  --ls-wide: 0.26em;        /* antetítulos */
  --ls-button: 0.12em;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(64px, 8vw, 104px);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 92px;
  --header-h-compact: 72px;

  /* Forma y elevación */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(59, 37, 35, 0.05);
  --shadow: 0 16px 40px rgba(59, 37, 35, 0.10);
  --shadow-lg: 0 28px 70px rgba(59, 37, 35, 0.16);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.3s var(--ease);
  --t-slow: 0.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms linear;
    --t: 0.01ms linear;
    --t-slow: 0.01ms linear;
  }
}