/* ==========================================================================
   Charles and Lois Home — Design Tokens
   Every colour, type, spacing and layout value used across the site lives
   here. Change a value once and it updates everywhere it's referenced.
   ========================================================================== */

:root {
  /* ---- Colour: brand ---- */
  --color-forest: #0F241C;      /* deep forest green — primary dark */
  --color-green: #1B3A2F;       /* secondary green — panels, header */
  --color-gold: #B08D57;        /* muted brass gold — accent only, use sparingly */
  --color-gold-text: #7F643C;   /* darker gold for text-on-light use (WCAG 1.4.3: 5.05:1 vs cream) — --color-gold itself fails at 2.82:1, so use this for any gold text on a light background */
  --color-cream: #F7F4EE;       /* warm cream — primary light background */
  --color-charcoal: #2A2622;    /* charcoal — body text on light backgrounds */
  --color-sage: #E8ECE6;        /* soft sage — subtle section backgrounds, borders */

  /* ---- Colour: functional aliases ----
     Reference these in components rather than the raw brand colours above,
     so a future re-theme only touches this block. */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-sage);
  --color-surface: #FFFFFF;
  --color-text: var(--color-charcoal);
  --color-text-inverse: var(--color-cream);
  --color-text-muted: #6B6459;
  --color-accent: var(--color-gold);
  --color-border: #DDD7C9;
  --color-border-strong: #9D8C64; /* darker border for form inputs / filter buttons (WCAG 1.4.11: 3.00:1 vs cream) — --color-border itself is 1.31:1 and stays as-is for decorative card/divider borders, which aren't required to meet 3:1 */
  --color-border-dark: rgba(247, 244, 238, 0.18);
  --color-focus: #69977E; /* distinct from gold so focus never looks like decoration; darkened from #6E9A82 to clear WCAG 1.4.11 (3.02:1 vs cream) */

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — reads comfortably from 320px up through desktop */
  --text-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --text-sm:   clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --text-lg:   clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --text-xl:   clamp(1.4rem, 1.28rem + 0.6vw, 1.7rem);
  --text-2xl:  clamp(1.8rem, 1.55rem + 1.2vw, 2.4rem);
  --text-3xl:  clamp(2.3rem, 1.9rem + 2vw, 3.4rem);
  --text-4xl:  clamp(2.8rem, 2.2rem + 3vw, 4.6rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 780px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --header-height: 84px;

  /* ---- Shape & elevation (used deliberately, not by default) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;
  --shadow-soft: 0 12px 32px -20px rgba(15, 36, 28, 0.35);

  /* ---- Motion ---- */
  --transition-fast: 160ms ease;
  --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Breakpoints (referenced in comments; CSS vars aren't usable inside
     @media queries directly, so these document the values used in
     responsive.css) ----
     --bp-sm: 480px;
     --bp-md: 768px;
     --bp-lg: 1024px;
     --bp-xl: 1280px;
  */
}

/* Respect reduced-motion preference site-wide */
@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;
  }
}