/* ==========================================================================
   International STR — Design tokens
   --------------------------------------------------------------------------
   Brand colours were extracted from the live WordPress/Elementor theme
   (betheme post-6.css, elementor post-6.css, inline Elementor styles) and
   from the logo artwork (strlogo.png). See docs/AUDIT.md §3 for sources.
   ========================================================================== */

:root {
  /* ---- Original brand palette (unchanged values) ---- */
  --brand-copper:        #ac6620; /* primary accent – buttons, rules, icons (87 uses on live site) */
  --brand-amber:         #c9823b; /* secondary accent – hovers, highlights */
  --brand-gold:          #f5c51a; /* logo gold – use on dark backgrounds only */
  --brand-peach:         #ffe5d4; /* soft accent fills, badges */
  --brand-cream:         #f5ede7; /* section background */
  --brand-sand:          #efe5de; /* alternate section background */
  --brand-blush:         #f3e9e3; /* Elementor kit accent – subtle fills */
  --brand-charcoal:      #2e2f2a; /* dark sections, headings */
  --brand-olive:         #31361d; /* deepest dark – footer */
  --brand-slate:         #626262; /* body text (theme default) */

  /* ---- Accessibility variant (proposed – pending client approval) ----
     #ac6620 on white = 4.49:1, just under WCAG AA (4.5:1) for small text.
     This darker step of the same hue reaches 5.8:1 on white / 5.4:1 on cream
     and is used ONLY for small text links and filled-button backgrounds. */
  --brand-copper-deep:   #94561b;

  /* ---- Semantic roles ---- */
  --color-bg:            #ffffff;
  --color-bg-alt:        var(--brand-cream);
  --color-bg-muted:      var(--brand-sand);
  --color-bg-dark:       var(--brand-charcoal);
  --color-bg-darker:     var(--brand-olive);
  --color-heading:       var(--brand-charcoal);
  --color-text:          #4f4f4b;            /* slightly darker than slate for long-form reading */
  --color-text-muted:    var(--brand-slate);
  --color-text-on-dark:  #f3ece6;
  --color-muted-on-dark: #c9c3bb;
  --color-link:          var(--brand-copper-deep);
  --color-link-hover:    var(--brand-copper);
  --color-accent:        var(--brand-copper);
  --color-border:        #e4d9cf;
  --color-border-strong: #cdbfb2;
  --color-focus:         var(--brand-copper);
  --color-success:       #2f6b3a;
  --color-danger:        #a8322a;

  /* ---- Typography ----
     Live site loads six families; consolidated to the two that carry the
     brand: Cormorant Garamond (serif, matches the logo wordmark) and Poppins. */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --fs-2xl:  clamp(2.125rem, 1.6rem + 2vw, 3rem);
  --fs-3xl:  clamp(2.6rem, 1.8rem + 3.4vw, 4.5rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.75;

  --tracking-eyebrow: 0.18em;

  /* ---- Spacing (8-pt scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);

  /* ---- Shape & depth ---- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(46, 47, 42, 0.06);
  --shadow:    0 10px 30px -12px rgba(46, 47, 42, 0.22);

  /* ---- Layout ---- */
  --header-h: 84px;
  --container-max: 1240px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 700ms;

  /* ---- Bootstrap bridges ---- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius);
}

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