/* =============================================================
   Vita3 — Tokens (ClaudeDesign import 2026-05-08)
   Editorial-warm system. Olive accent + cream-deep + terracotta.
   Backwards-compat aliases preserved (forest/sage/text*) so existing
   CSS still resolves.
   ============================================================= */

:root {
  /* === ClaudeDesign palette === */
  --vita-paper:        #F5EFE3;            /* Body bg principal */
  --vita-paper-2:      #FAF6EE;            /* Alternancia ligera */
  --vita-cream:        #E8DDC9;            /* Cream-deep — testimonios, photo bg */
  --vita-cream-soft:   #FAF6EE;            /* Cream casi blanco — inputs */
  --vita-bone:         rgba(28, 26, 24, 0.18);   /* Bordes sutiles */
  --vita-stone:        rgba(28, 26, 24, 0.28);   /* Borde más visible */

  --vita-ink:          #1C1A18;            /* Texto principal */
  --vita-ink-2:        #6B6358;            /* Texto secundario / muted */
  --vita-ink-3:        #9A9085;            /* Texto faint / microcopy */

  --vita-olive:        #4A5236;            /* Accent principal CTAs */
  --vita-olive-2:      #5C6646;            /* Olive hover */
  --vita-olive-light:  #9DAC83;            /* Sage clarito (logo 3, accents suaves) */
  --vita-olive-deep:   #23271D;            /* Fondo oscuro (valores, proceso, footer) */
  --vita-terracotta:   #B8755A;            /* Accent especial */

  --vita-line:         rgba(28, 26, 24, 0.12);
  --vita-line-soft:    rgba(28, 26, 24, 0.06);

  /* Verde tinted (cajas) */
  --vita-tint-3:       rgba(74, 82, 54, 0.04);
  --vita-tint-6:       rgba(74, 82, 54, 0.08);
  --vita-tint-10:      rgba(74, 82, 54, 0.12);
  --vita-tint-16:      rgba(74, 82, 54, 0.18);

  /* === Backwards-compat aliases (do not delete — referenced everywhere) === */
  --vita-forest:       var(--vita-olive);
  --vita-forest-dark:  var(--vita-ink);
  --vita-forest-deep:  var(--vita-olive-deep);
  --vita-sage:         var(--vita-olive);
  --vita-sage-dark:    var(--vita-olive-2);
  --vita-text:         var(--vita-ink);
  --vita-text-muted:   var(--vita-ink-2);
  --vita-text-faint:   var(--vita-ink-3);
  --vita-charcoal:     var(--vita-olive-deep);
  --vita-rust:         var(--vita-terracotta);

  /* === Tipografía (ClaudeDesign) === */
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-alt: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Escala display */
  --text-display-xxl: clamp(64px, 8vw, 116px);
  --text-display-xl:  clamp(52px, 8vw, 116px);
  --text-display-lg:  clamp(40px, 5.4vw, 84px);
  --text-display-md:  clamp(32px, 3.8vw, 52px);
  --text-display-sm:  clamp(22px, 2vw, 28px);

  /* Escala UI */
  --text-body-xl:     clamp(20px, 1.6vw, 24px);
  --text-body-lg:     clamp(17px, 1.3vw, 20px);
  --text-body:        17px;
  --text-body-sm:     14px;
  --text-eyebrow:     14px;

  /* Letter spacing */
  --letter-spacing-display:    -0.025em;
  --letter-spacing-display-sm: -0.02em;
  --letter-spacing-eyebrow:    0.06em;
  --letter-spacing-button:     0.005em;

  /* Layout */
  --space-section:    clamp(80px, 10vw, 140px);
  --space-section-sm: clamp(56px, 7vw, 96px);
  --space-container:  clamp(20px, 4vw, 56px);
  --container-max:    1320px;
  --container-narrow: 980px;
  --container-text:   720px;
  --container-gutter: clamp(20px, 4vw, 56px);

  /* Radius */
  --radius-card:    10px;
  --radius-card-md: 4px;
  --radius-input:   2px;
  --radius-pill:    9999px;

  /* Shadows */
  --shadow-card:        0 1px 2px rgba(28, 26, 24, 0.04);
  --shadow-card-hover:  0 14px 30px -16px rgba(35, 39, 29, 0.32);
  --shadow-nav:         0 24px 56px -12px rgba(28, 26, 24, 0.32),
                        0 8px 18px -4px rgba(28, 26, 24, 0.10),
                        0 1px 2px rgba(28, 26, 24, 0.06);

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  700ms;

  /* Borders */
  --border-thin:     1px solid var(--vita-line);
  --border-hairline: 1px solid var(--vita-line);
}