:root {
  /* — Color: action — */
  --color-primary:            #8c5a2a;
  --color-primary-hover:      #7a4e24;
  --color-accent:             #c4793a;
  --color-accent-hover:       #b06c30;

  /* — Color: surface — */
  --color-surface:            #faf7f4;
  --color-surface-elevated:   #ffffff;
  --color-surface-tinted:     #f2ebe3;
  --color-surface-overlay:    rgba(26, 25, 22, 0.04);

  /* — Color: text — */
  --color-text-primary:       #1a1916;
  --color-text-secondary:     #6b6660;
  --color-text-tertiary:      #9c958f;
  --color-text-on-primary:    #ffffff;
  --color-text-on-accent:     #ffffff;

  /* — Color: border — */
  --color-border:             #e2dbd3;
  --color-border-strong:      #cdc4ba;
  --color-border-focus:       #8c5a2a;

  /* — Color: derived — */
  --color-accent-tinted:      rgba(196, 121, 58, 0.10);
  --color-accent-tinted-border: rgba(196, 121, 58, 0.20);
  --color-text-on-image:      #a89070;

  /* — Color: semantic — */
  --color-success:            #2d6a3f;
  --color-success-bg:         #edf7f0;
  --color-warning:            #7d5a00;
  --color-warning-bg:         #fdf8e7;
  --color-error:              #8b2020;
  --color-error-bg:           #fdf0f0;

  /* — Typography — */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* — Type scale — */
  --text-hero:    72px;  --lh-hero:    1.03;
  --text-display: 64px;  --lh-display: 1.05;
  --text-h1:      40px;  --lh-h1:      1.15;
  --text-h2:      26px;  --lh-h2:      1.3;
  --text-h3:      20px;  --lh-h3:      1.4;
  --text-body:    18px;  --lh-body:    1.75;
  --text-sm:      15px;  --lh-sm:      1.5;
  --text-caption: 12px;  --lh-caption: 1.5;

  /* — Spacing — */
  --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;
  --space-lg: 24px;  --space-xl: 40px;  --space-2xl: 64px;  --space-3xl: 96px;

  /* — Radius — */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;  --radius-full: 9999px;

  /* — Elevation — */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

@media (max-width: 768px) {
  :root {
    --text-display: 36px;  --lh-display: 1.1;
    --text-h1:      28px;  --lh-h1:      1.2;
    --text-h2:      22px;  --lh-h2:      1.3;
    --text-h3:      18px;  --lh-h3:      1.4;
    --text-body:    16px;  --lh-body:    1.7;
    --text-sm:      14px;  --lh-sm:      1.5;
  }
}