:root {
  /* ── paper (warm cream, consistent warm tint) ── */
  --color-paper:       #FFFBF5;
  --color-paper-2:     #FFF6EC;
  --color-paper-3:     #FFEFD8;
  --color-white:       #FFFFFF;

  /* ── ink (warm-tinted grays, never cool) ── */
  --color-ink:         #2A2118;
  --color-ink-2:       #65584D;
  --color-ink-3:       #9A8D82;
  --color-ink-4:       #C8BBAF;

  /* ── accent (warm orange from logo, desaturated to ~70%) ── */
  --color-accent:      #D98C3E;
  --color-accent-hover:#E49D52;
  --color-accent-light: rgba(217, 140, 62, 0.07);
  --color-accent-ink:  #FFFFFF;

  /* ── pastel accents (for section variation) ── */
  --color-sage:        #E8F0E4;
  --color-blush:       #FFF0EB;
  --color-sky:         #ECF3F9;

  /* ── focus & rule ── */
  --color-focus:       #D98C3E;
  --color-rule:        #EBE2D6;

  /* ── type: display serif + body sans for contrast ── */
  --font-display:      'DM Serif Display', Georgia, serif;
  --font-body:         'Nunito', sans-serif;
  --font-label:        'Nunito', sans-serif;

  /* ── scale (generous, readable) ── */
  --text-hero:         clamp(3.2rem, 7.5vw, 5.5rem);
  --text-display:      clamp(2.2rem, 4.5vw, 3.4rem);
  --text-2xl:          clamp(1.5rem, 2.5vw, 2rem);
  --text-xl:           1.35rem;
  --text-lg:           1.125rem;
  --text-base:         1.0625rem;
  --text-sm:           0.9375rem;
  --text-xs:           0.8125rem;
  --text-label:        0.75rem;

  /* ── spacing ── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    32px;
  --space-xl:    64px;
  --space-2xl:   96px;
  --space-3xl:   128px;
  --space-4xl:   192px;

  /* ── motion (spring-like, never linear) ── */
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-reveal:  800ms;

  /* ── radius (varied, not uniform) ── */
  --radius:      14px;
  --radius-sm:   8px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-full: 100px;

  /* ── shadows (warm-tinted, not black) ── */
  --shadow-sm:   0 1px 3px rgba(42, 33, 24, 0.04), 0 1px 2px rgba(42, 33, 24, 0.03);
  --shadow-md:   0 4px 16px rgba(42, 33, 24, 0.06), 0 1px 3px rgba(42, 33, 24, 0.04);
  --shadow-lg:   0 12px 40px rgba(42, 33, 24, 0.08), 0 4px 12px rgba(42, 33, 24, 0.04);
  --shadow-lift: 0 16px 48px rgba(42, 33, 24, 0.10), 0 6px 16px rgba(42, 33, 24, 0.05);
}