/* ==========================================================================
   Avensa Studio — Design Tokens
   Palette: B "Sage & Bone"  ·  Reference: Norm Architects (soft minimalism)
   Animations package: Cinematic Scroll (Lenis + GSAP)
   ========================================================================== */

:root {
  /* ---- Color: Light ---- */
  --color-bg:           #f3f2ec; /* bone */
  --color-surface:      #ffffff;
  --color-surface-alt:  #e6e6dd; /* stone */
  --color-border:       #d6d6ca;

  /* ---- Color: Dark sections / footer ---- */
  --color-dark-bg:      #181a17; /* graphite-green */
  --color-dark-surface: #252823;
  --color-dark-border:  #34382f;

  /* ---- Accent: muted sage ---- */
  --color-accent-400:   #889578;
  --color-accent-500:   #6f7d63;
  --color-accent-600:   #59664f;

  /* ---- Text (high contrast, WCAG AA) ---- */
  --color-text:         #171915; /* near-black */
  --color-text-muted:   #555a4f; /* readable muted */
  --color-text-invert:  #f3f2ec;
  --color-text-on-dark: #e8eae3;

  --color-success:      #4a7c59;
  --color-error:        #b4453a;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans:    "Inter", "DM Sans", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Instrument Serif", "Fraunces", Georgia, serif;

  --fs-hero:  clamp(2.5rem, 1.4rem + 4.8vw, 4.5rem);
  --fs-h1:    clamp(2.125rem, 1.35rem + 3vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3:    clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  --fs-body:  clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17–18px */
  --fs-small: 0.9375rem;  /* 15px */
  --fs-label: 0.8125rem;  /* 13px caps */

  --fw-body:    450;
  --fw-medium:  500;
  --fw-heading: 600;
  --fw-hero:    600;
  --fw-btn:     600;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --ls-label: 0.12em;

  /* ---- Spacing / radius / shadow ---- */
  --space-section: clamp(80px, 9vw, 140px);
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 28px rgba(23, 25, 21, .10);
  --shadow-soft: 0 2px 14px rgba(23, 25, 21, .06);
  --container-max: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-fast:   .25s;
  --dur-base:   .45s;
  --dur-slow:   .8s;
}