/* =============================================================================
   tokens.css — single source of truth for design tokens on avamckinley.com.
   Loaded FIRST on every page, before any other stylesheet.
   Phase 3.2 (centralization) — visual outcome unchanged.
   Phase 3.3 will retire the legacy aliases below as the visual refonte applies.
   ============================================================================= */

/* === COLOR TOKENS === */
:root {
  /* Paper layer */
  --paper:           #FBF6EF;                  /* page cream */
  --paper-light:     #FFFAF3;                  /* lighter cream — gradient endpoint legacy */
  --paper-band:      #F2E3DD;                  /* deeper cream band */

  /* Ink layer */
  --ink:             #2C2528;                  /* warm body ink */
  --ink-soft:        #6B5B5E;                  /* derived for secondary text */
  --ink-deep:        #3A2F33;                  /* aubergine — primary CTA, headings on band */

  /* Accent — the felt-tip mark of intimacy */
  --accent:          #DFA79C;                  /* salmon (Ava's signature placeholder) */
  --accent-ink:      #9E5448;                  /* derived to clear AA contrast on cream for body-weight accent text (4.5:1+) */

  /* Accent A/B candidates (commented for one-line swap testing):
     Plum:                    --accent: #7C4757; --accent-ink: #5C2F3D;
     Aubergine-as-accent:     --accent: #3A2F33; --accent-ink: #2C2528;
  */

  /* Lines and surfaces */
  --hairline:        rgba(44, 37, 40, 0.08);
  --hairline-strong: rgba(44, 37, 40, 0.16);
  --ink-veil:        rgba(44, 37, 40, 0.12);   /* used in cover paper-shadow */

  /* ---------------------------------------------------------------------------
     Legacy aliases — preserved bit-for-bit so existing component CSS, inline
     <style> rules, and newsletter.js keep rendering pixel-identical.
     Phase 3.3 will retire these as the design system applies.
     ------------------------------------------------------------------------- */

  /* Map of old name → canonical token */
  --bg:              var(--paper);
  --bg2:             var(--paper-light);
  --band:            var(--paper-band);
  --brand:           var(--ink-deep);
  --salmon2:         var(--accent);

  /* Held at original literal values to preserve visuals exactly.
     `--muted` is rgba (overlay-blends with the page) — not the same as --ink-soft (solid).
     `--line` differs from --hairline by a few percentage points; kept independent. */
  --muted:           rgba(44, 37, 40, 0.78);
  --line:            rgba(58, 47, 51, 0.12);
  --salmon:          #E8B8AE;

  /* Layout / effects (legacy, will be re-evaluated in 3.3) */
  --max:             1120px;
  --radius:          16px;
  --radiusLg:        28px;
  --shadow:          0 24px 64px rgba(44, 37, 40, 0.10);
  --shadowSm:        0 8px 24px rgba(44, 37, 40, 0.08);
}

/* === TYPOGRAPHY TOKENS === */
:root {
  --font-display: 'Fraunces', Georgia, serif;     /* the editorial layer — used everywhere except chrome */
  --font-ui:      'Inter', system-ui, sans-serif; /* chrome only — nav, buttons, footer links, form labels */
  /* No --font-body. Body text is Fraunces at opsz 18. The optical-size axis adapts the design for body sizes. */
}

/* === SPACING SCALE === */
:root {
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  --page-gutter: clamp(20px, 5vw, 64px);
  --measure:     65ch;                            /* the letter measure — Ava's text never breaks this */
}

/* === TYPE SCALE === */
:root {
  --fs-micro:        clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-body:         clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead:         clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-eyebrow:      clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --fs-h3:           clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h2:           clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --fs-h1:           clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --fs-display:      clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --fs-pull-quote:   clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem);

  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-body:     1.6;
  --lh-loose:    1.75;
}

/* === MOTION === */
:root {
  --motion-fast:    150ms ease-out;
  --motion-base:    220ms ease-out;
  --motion-slow:    400ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --motion-breathe: 7s ease-in-out infinite;

  /* Legacy aliases — old names still in use across inline styles. */
  --ease:           cubic-bezier(.2, .8, .2, 1);
  --t:              220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:    0ms;
    --motion-base:    0ms;
    --motion-slow:    0ms;
    --motion-breathe: 0s;
  }
}

/* === BREATHING (Ava's signature device) === */
@keyframes breathe {
  0%, 100% { font-variation-settings: 'wght' 220, 'opsz' 18; }
  50%      { font-variation-settings: 'wght' 520, 'opsz' 72; }
}

/* Three deployments site-wide, no more:
     .hero-title          (loop)
     .article-drop-cap    (one-shot on scroll-into-view)
     .closing-rule        (one-shot before signature)
   Documented here as the canonical motion device.
   Currently still attached to the existing .hero__title selector pending 3.3. */

/* === Footer secondary row (legal links) === */
.footer__row--secondary {
  margin-top: var(--s-3);
  justify-content: flex-start;
  gap: var(--s-5);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-micro);
  letter-spacing: 0.01em;
}

.footer__social:hover {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.footer__social__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}