:root {

  /* ─── COLORS ─── */

  /* Backgrounds */
  --color-bg-primary:     #ede8d5;
  --color-bg-secondary:   #e4dfc8;
  --color-bg-elevated:    #f5f2e8;
  --color-bg-border:      #d4cfbc;

  /* Text */
  --color-text-primary:   #141413;
  --color-text-secondary: #4a4845;
  --color-text-muted:     #8a8885;

  /* Accent -- near black */
  --color-accent:         #141413;
  --color-accent-dim:     #2a2825;
  --color-accent-faint:   #e4dfc8;

  /* Grays */
  --color-mid-gray:       #b0aea5;
  --color-light-gray:     #d4cfbc;

  /* Utility */
  --color-white:          #f5f2e8;
  --color-black:          #141413;


  /* ─── TYPOGRAPHY ─── */

  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;
  --text-5xl:   5.5rem;
  --text-6xl:   7.5rem;

  /* Weight */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;


  /* ─── SPACING ─── */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;


  /* ─── LAYOUT ─── */

  --container-max:    1160px;
  --container-narrow: 720px;
  --container-wide:   1400px;
  --gutter:           clamp(1.5rem, 5vw, 4rem);


  /* ─── BORDERS ─── */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --border-subtle:  1px solid #d4cfbc;
  --border-muted:   1px solid #c4bfac;
  --border-accent:  1px solid #141413;


  /* ─── SHADOWS ─── */

  --shadow-sm:   0 1px 3px rgba(20,20,19,0.06);
  --shadow-md:   0 4px 16px rgba(20,20,19,0.08);
  --shadow-lg:   0 8px 40px rgba(20,20,19,0.12);
  --shadow-glow: 0 0 40px rgba(20,20,19,0.06);


  /* ─── TRANSITIONS ─── */

  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-spring: 600ms cubic-bezier(0.22, 1, 0.36, 1);


  /* ─── Z-INDEX ─── */

  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 1000;

}