/* ============================================================
   VARIABLES — Design Tokens
   All global design tokens. Never hard-code values elsewhere.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS
  ---------------------------------------------------------- */
  --color-dark:       #201F1D;  /* near-black — text, dark sections */
  --color-taupe:      #C6C3BB;  /* warm gray — dividers, muted accents */
  --color-cream:      #F1EDE5;  /* off-white warm — section backgrounds */
  --color-off-white:  #F9F9F9;  /* near-white — default page background */
  --color-white:      #FFFFFF;  /* pure white — hero/dark section text */

  /* Semantic aliases */
  --color-text:       var(--color-dark);
  --color-bg:         var(--color-off-white);
  --color-border:     var(--color-taupe);
  --color-muted:      #6B6860;  /* body-copy secondary */

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* ----------------------------------------------------------
     SPACING SCALE (base 8px)
  ---------------------------------------------------------- */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  80px;
  --sp-9:  96px;
  --sp-10: 120px;
  --sp-11: 160px;

  /* Section vertical padding */
  --section-pad-v:        clamp(var(--sp-6), 8vw, var(--sp-10));
  --section-pad-v-sm:     clamp(var(--sp-5), 5vw, var(--sp-8));

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-max:   1280px;
  --container-pad:   clamp(20px, 4vw, 60px);
  --header-h:        80px;

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.25, 0, 0.2, 1);
  --t-fast:         0.2s var(--ease-out);
  --t-base:         0.35s var(--ease-out);
  --t-slow:         0.6s  var(--ease-out);

  /* ----------------------------------------------------------
     BORDERS & RADIUS
  ---------------------------------------------------------- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --border-thin: 1px solid var(--color-border);

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-header: 0 1px 0 rgba(32, 31, 29, 0.08);
  --shadow-card:   0 4px 24px rgba(32, 31, 29, 0.06);
}