/* ==========================================================================
   Meredith's Golden Moments — design tokens (ported verbatim from the
   approved v3 prototype token system: tokens/colors.css, typography.css,
   spacing.css, effects.css).
   Changes from source, per the v3 design brief:
   - --blush removed (v3 removed pink from the UI entirely)
   - Google Fonts @import removed; fonts are self-hosted via theme.json
   ========================================================================== */

:root {
  /* ---- Brand source colors ---- */
  --ivory:          #FDF8ED;
  --linen:          #F6F1E8;
  --soft-black:     #111111;
  --green:          #C3CBBC;
  --deep-olive:     #6E745F;
  --soft-gold:      #FAE4AE;
  --champagne-gold: #D8C3A5;
  --warm-taupe:     #B8ADA3;
  --charcoal:       #1A1714;
  --white:          #ffffff;

  /* ---- Accessible text values on warm ivory ---- */
  --text-headline:  #111111;
  --text-body:      #5F5B54;
  --text-body-min:  #686666;
  --text-muted:     #6E6A62;
  --text-olive:     #5B614E;
  --text-on-dark:   #F3ECDC;
  --text-on-green:  #2C302A;
  --text-on-gold:   #5A4A2E;

  /* Text-safe variants of the accent colours.
     The decorative gold and taupe used in the prototype sit at 4.3:1 and
     2.9:1 on the linen bands, below the WCAG AA 4.5:1 floor for small text.
     These are the smallest darkenings that pass on ivory, linen and white;
     the decorative values above are unchanged for rules, stars and fills. */
  --text-gold:        #856A3C;
  --text-placeholder: #786D55;

  /* ---- Gold ramp ---- */
  --gold-100: #FAE4AE;
  --gold-200: #E9CE93;
  --gold-300: #D8C3A5;
  --gold-400: #B89B6A;
  --gold-500: #8A6E3E;

  /* ---- Semantic surfaces ---- */
  --surface-page:  var(--ivory);
  --surface-alt:   var(--linen);
  --surface-green: var(--green);
  --surface-dark:  var(--charcoal);
  --surface-card:  var(--white);

  /* ---- Borders ---- */
  --border-hairline: #E7DFCF;
  --border-gold:     var(--gold-400);
  --border-taupe:    var(--warm-taupe);
  --border-green:    #AEB6A5;

  /* ---- Links ---- */
  --link-color: var(--deep-olive);
  --link-hover: var(--soft-black);

  /* ---- Fonts ---- */
  --font-serif:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans:   "Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script: "Parisienne", cursive;

  /* ---- Display & headings — Cormorant Garamond ---- */
  --text-display-xl: 500 clamp(40px, 6vw, 68px)/1.1  var(--font-serif);
  --text-display-l:  400 clamp(32px, 4.4vw, 48px)/1.18 var(--font-serif);
  --text-display-m:  500 clamp(27px, 3.2vw, 36px)/1.25 var(--font-serif);
  --text-heading:    500 clamp(22px, 2.4vw, 27px)/1.3  var(--font-serif);
  --text-quote:      400 clamp(24px, 3vw, 34px)/1.4  var(--font-serif);

  /* ---- Body & UI — Lato ---- */
  --text-lead:    400 clamp(18px, 1.6vw, 21px)/1.6  var(--font-sans);
  --text-body-l:  400 18px/1.7 var(--font-sans);
  --text-body-f:  400 16px/1.7 var(--font-sans);
  --text-nav:     400 15px/1.4 var(--font-sans);
  --text-button:  700 15px/1   var(--font-sans);
  --text-label:   700 12px/1.4 var(--font-sans);
  --text-caption: 400 14px/1.5 var(--font-sans);

  /* ---- Tracking ---- */
  --tracking-label: 0.18em;
  --tracking-nav:   0.06em;
  --tracking-button:0.08em;

  /* ---- Base spacing scale ---- */
  --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;
  --space-10: 128px;

  /* ---- Page margins / section rhythm ---- */
  --page-margin: clamp(20px, 6vw, 120px);
  --section-gap:    clamp(72px, 11vw, 160px);
  --section-inner:  clamp(40px, 6vw, 90px);
  --hero-pad-y:     clamp(72px, 11vw, 160px);

  /* ---- Content-flow spacing ---- */
  --gap-heading-para:   clamp(20px, 2.4vw, 32px);
  --gap-para-button:    clamp(24px, 2.8vw, 40px);
  --gap-heading-image:  clamp(28px, 3.6vw, 60px);
  --gap-para:           clamp(16px, 1.6vw, 24px);
  --gap-card:           clamp(24px, 2.8vw, 40px);
  --gap-text-photo:     clamp(28px, 3.4vw, 48px);
  --card-padding:       clamp(24px, 2.8vw, 40px);

  /* ---- Measures ---- */
  --content-max:      1280px;
  --content-max-wide: 1440px;
  --prose-max:        66ch;

  /* ---- Radii — square or lightly softened, 0–8px. No pills. ---- */
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-button: 4px;
  --radius-image:  6px;
  --radius-card:   8px;

  /* ---- Border widths ---- */
  --border-hairline-w: 1px;
  --border-photo-w:    1px;

  /* ---- Shadows (very restrained — near-flat) ---- */
  --shadow-none:   none;
  --shadow-soft:   0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-card:   0 6px 24px rgba(26, 23, 20, 0.06);
  --shadow-focus:  0 0 0 3px rgba(110, 116, 95, 0.45);

  /* ---- Image treatment ---- */
  --overlay-photo-scrim:   linear-gradient(180deg, rgba(20,17,14,0) 40%, rgba(20,17,14,0.55) 100%);
  --overlay-photo-caption: linear-gradient(0deg, rgba(20,17,14,0.62) 0%, rgba(20,17,14,0) 55%);
  --overlay-golden-hour:   linear-gradient(180deg, rgba(250,228,174,0.10) 0%, rgba(20,17,14,0.40) 100%);
  --photo-frame: var(--border-photo-w) solid var(--warm-taupe);

  /* ---- Motion (discovered, not noticed) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-reveal: 500ms;
  --duration-fast:   240ms;
  --stagger-step:    150ms;
  --hover-image-scale: 1.02;
}

/* Gentle fade-up reveal — soft, no slides. Respect reduced motion. */
@keyframes mgm-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Visible focus state for all interactive elements (olive focus ring). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}