/* Design tokens — Ana Paula Celis Makeup
   Reference: Design.md §2 (color), §3 (type), §4 (space), §7 (motion). */

:root {
  /* ─── Brand palette (canonical, per Design.md §2.1) ───────────────────── */
  --color-ivory:  #EAE8E2;   /* lightest — primary background */
  --color-marfil: #D8D4CA;   /* light    — secondary surface, soft dividers */
  --color-bridal: #C5BFAF;   /* mid      — tertiary surface, stronger borders */
  --color-coffee: #64513D;   /* dark     — primary text, dark sections */
  --color-rose:   #996962;   /* accent   — primary CTA, hover */

  /* ─── Functional aliases (per Design.md §2.2) ────────────────────────── */
  --bg:            var(--color-ivory);
  --bg-alt:        var(--color-marfil);
  --bg-dark:       var(--color-coffee);
  --surface:       #FFFFFF;
  --text:          var(--color-coffee);
  --text-muted:    #8A7A66;            /* coffee at ~70% */
  --text-on-dark:  var(--color-ivory);
  --accent:        var(--color-rose);
  --accent-hover:  #855952;            /* rose darkened ~10% */
  --border:        var(--color-bridal);
  --border-soft:   var(--color-marfil);

  /* ─── Legacy aliases (preserve current visual meaning) ────────────────
     Earlier code referenced --bridal for the LIGHT tone (#D8D4CA) and
     --marfil for the MID tone (#C5BFAF) — the inverse of the manual's
     terminology. Keep their existing values so components don't shift,
     while the canonical --color-* names above are now spec-correct. */
  --ivory:        var(--color-ivory);
  --bridal:       #D8D4CA;
  --marfil:       #C5BFAF;
  --coffee:       var(--color-coffee);
  --coffee-soft:  #826b53;
  --rose:         var(--color-rose);
  --rose-soft:    #b88a82;
  --ink:          #3a2f24;
  --paper:        var(--color-ivory);

  /* ─── Type families (Design.md §3.1) ─────────────────────────────────── */
  --font-display: "The Seasons", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  /* Legacy aliases */
  --serif:        var(--font-display);
  --sans:         var(--font-sans);
  --mono:         var(--font-mono);

  /* ─── Type scale (Design.md §3.2) ────────────────────────────────────── */
  --fs-display:  4.5rem;     /* 72px */
  --fs-h1:       3.5rem;     /* 56px */
  --fs-h2:       2.5rem;     /* 40px */
  --fs-h3:       1.75rem;    /* 28px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-body:     1rem;       /* 16px */
  --fs-small:    0.875rem;   /* 14px */
  --fs-eyebrow:  0.75rem;    /* 12px */

  /* ─── Spacing — 8pt base (Design.md §4.2) ────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;
  --space-10:160px;

  /* ─── Motion (Design.md §7) ──────────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;

  /* ─── Layout (Design.md §4.1) ────────────────────────────────────────── */
  --max-w:      1280px;
  --wide-w:     1440px;
  --reading-w:   720px;
}

/* Mobile type scale — reduce display sizes ~30% (Design.md §3.5) */
@media (max-width: 768px) {
  :root {
    --fs-display: 44px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
  }
}

/* Reduced motion (Design.md §7) */
@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;
  }
}