:root {
  /* ── Palette ─────────────────────────────────────────── */
  --color-ink:     #0C0C0C;
  --color-paper:   #FFFFFF;
  --color-canvas:  #F5F3EF;
  --color-ivory:   #FAFAF7;
  --color-border:  #E2DDD7;
  --color-stone:   #C4BCB3;
  --color-muted:   #9A9087;
  --color-warm:    #5A5046;
  --color-accent:  #C4A07A;
  --color-accent-dark: #A8845A;
  --color-error:   #B83232;
  --color-success: #2A8A52;
  --color-sale:    #B83232;

  /* Semantic aliases */
  --bg:            var(--color-canvas);
  --bg-raised:     var(--color-paper);
  --text:          var(--color-ink);
  --text-secondary: var(--color-warm);
  --text-muted:    var(--color-muted);
  --border:        var(--color-border);
  --border-strong: var(--color-stone);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Type scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.75rem;    /* 44px */
  --text-4xl:  3.75rem;    /* 60px */
  --text-5xl:  5rem;       /* 80px */
  --text-display: clamp(3.25rem, 7vw, 6.5rem);

  /* Letter spacing */
  --ls-tight:   -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;

  /* Line heights */
  --lh-none:  1;
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* ── Spacing (8px base) ───────────────────────────────── */
  --sp-1:  0.5rem;     /* 8px  */
  --sp-2:  1rem;       /* 16px */
  --sp-3:  1.5rem;     /* 24px */
  --sp-4:  2rem;       /* 32px */
  --sp-5:  2.5rem;     /* 40px */
  --sp-6:  3rem;       /* 48px */
  --sp-8:  4rem;       /* 64px */
  --sp-10: 5rem;       /* 80px */
  --sp-12: 6rem;       /* 96px */
  --sp-16: 8rem;       /* 128px */
  --sp-20: 10rem;      /* 160px */

  /* ── Layout ─────────────────────────────────────────── */
  --max-w:      1440px;
  --content-w:  1200px;
  --narrow-w:   720px;
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --header-h:   3.5rem;    /* 56px mobile */
  --header-h-lg: 4.25rem;  /* 68px desktop */

  /* ── Radius ─────────────────────────────────────────── */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 6px;
  --radius-full: 999px;

  /* ── Transitions ─────────────────────────────────────── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   380ms;
  --t-reveal: 680ms;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);

  /* ── Z-index ─────────────────────────────────────────── */
  --z-below:  -1;
  --z-base:    1;
  --z-above:  10;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
  --z-top:    500;
}