:root {
  /* ─── Backgrounds ─── */
  --color-bg-base:        #0C0A07;
  --color-bg-surface:     #171410;
  --color-bg-elevated:    #211D18;
  --color-bg-border:      rgba(242, 237, 228, 0.07);
  --color-bg-border-md:   rgba(242, 237, 228, 0.12);
  --color-bg-border-lg:   rgba(242, 237, 228, 0.20);

  /* ─── Text ─── */
  --color-text-primary:   #F2EDE4;
  --color-text-secondary: #A89F94;
  --color-text-tertiary:  #6E665C;

  /* ─── Gold — The Moment of Recognition ─── */
  --color-gold:           #C4903A;
  --color-gold-light:     #D4A84B;
  --color-gold-dim:       rgba(196, 144, 58, 0.12);
  --color-gold-focus:     rgba(196, 144, 58, 0.35);

  /* ─── Sage — The Natural World at Rest ─── */
  --color-sage:           #6B8F71;
  --color-sage-dim:       rgba(107, 143, 113, 0.10);

  /* ─── Functional ─── */
  --color-error:          #C05050;
  --color-success:        #5C8F6A;

  /* ─── Typography ─── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ─── Spacing ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ─── Border Radius ─── */
  --radius-sm:  3px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ─── Layout ─── */
  --container-max:   1200px;
  --container-prose: 720px;
  --container-pad:   clamp(1.25rem, 5vw, 4rem);

  /* ─── Motion ─── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   450ms ease;

  /* ─── Nav ─── */
  --nav-height: 72px;

  /* Brand mark; sync with .site-logo img */
  --logo-mark-height: 261px; /* 290px × 0.9 */

  /* Lightest gold highlight sampled from assets/logo/dv-logo.png */
  --color-logo-light: #FEFEDA;
}