/* --- Tokens (cooler base + sage accent — fresh, clear, trustworthy) --- */
    :root {
      --bg:           #F2F4F3;   /* airy off-white, slight cool cast */
      --ink:          #181614;
      --ink-muted:    #5E6563;   /* slightly cooler grey */
      --line:         #DDE3E0;
      --white:        #FFFFFF;
      --accent:       #3D554C;   /* muted sage — primary actions */
      --accent-hover: #324840;
      --surface:      #FAFBFA;   /* lifted cards on --bg */

      --glass-bg:     rgba(242, 244, 243, 0.62);
      --glass-border: rgba(255, 255, 255, 0.5);
      --glass-blur:   blur(20px) saturate(1.35);
      --glass-shadow: 0 6px 28px rgba(24, 22, 20, 0.07);

      --glass-bg-hover:     rgba(255, 255, 255, 0.78);
      --glass-shadow-hover: 0 10px 36px rgba(24, 22, 20, 0.11);

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'DM Sans', system-ui, sans-serif;

      --text-xs:   0.75rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-lg:   1.25rem;
      --text-xl:   1.75rem;
      --text-2xl:  2.5rem;
      --text-3xl:  4rem;
      --text-4xl:  clamp(3.25rem, 8vw, 6.5rem);

      --space-xs:  0.5rem;
      --space-sm:  1rem;
      --space-md:  2rem;
      --space-lg:  4rem;
      --space-xl:  7rem;
      --space-2xl: 12rem;

      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 20px;

      --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
      --duration:     240ms;
      --duration-slow: 480ms;

      --nav-h: 4.5rem;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      font-weight: 400;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.5;
    }