:root {
  /* ── COLORS ───────────────────────────── */
  --y-color-primary: #8B6914;
  --y-color-primary-subtle: #a67c1a;
  --y-color-secondary: #d4a832;
  --y-color-secondary-subtle: #f0d060;
  --y-color-accent: #6B1D3A;
  --y-color-accent-light: #c9577a;
  --y-color-border: rgba(139, 105, 20, 0.15);
  --y-color-shadow: rgba(0, 0, 0, 0.08);
  --y-color-bg: #faf8f5;
  --y-color-bg-subtle: #f5f0e8;
  --y-color-bg-warm2: #ede5d5;
  --y-color-bg-warm3: #e8dfd0;
  --y-color-dark: #1a1a2e;
  --y-color-dark-2: #2a2a4e;
  --y-color-dark-3: #2d1b3d;
  --y-color-text: #1a1a2e;
  --y-color-text-muted: #6b6b7b;
  --y-color-text-light: #9ca3af;
  --y-color-text-dim: #6b7280;
  --y-color-white: #fff;
  --y-color-success: #16a34a;
  --y-color-success-subtle: #dcfce7;
  --y-color-success-dark: #166534;
  --y-color-warning: #854d0e;
  --y-color-warning-subtle: #fef9c3;
  --y-color-danger: #ef4444;
  --y-color-danger-subtle: #fef2f2;
  --y-color-danger-dark: #dc2626;
  --y-color-info: #1e40af;
  --y-color-info-subtle: #dbeafe;
  --y-color-error-border: #f87171;
  --y-color-toast-bg: #22c55e;
  --y-color-overlay-light: rgba(255, 255, 255, 0.1);

  /* ── BACKWARD COMPAT (for JS-generated inline styles) ── */
  --gold: var(--y-color-primary);
  --gold-light: var(--y-color-primary-subtle);
  --gold-bright: var(--y-color-secondary);
  --gold-brightest: var(--y-color-secondary-subtle);
  --burgundy: var(--y-color-accent);
  --dark: var(--y-color-dark);
  --dark2: var(--y-color-dark-2);
  --dark3: var(--y-color-dark-3);
  --bg: var(--y-color-bg);
  --bg-warm: var(--y-color-bg-subtle);
  --bg-warm2: var(--y-color-bg-warm2);
  --bg-warm3: var(--y-color-bg-warm3);
  --fg: var(--y-color-text);
  --muted: var(--y-color-text-muted);
  --border: var(--y-color-border);
  --white: var(--y-color-white);

  /* ── FONT SIZES ───────────────────────── */
  --y-font-xxs: 0.625rem;
  --y-font-xs: 0.75rem;
  --y-font-s: 0.875rem;
  --y-font-m: 1rem;
  --y-font-l: 1.125rem;
  --y-font-xl: 1.25rem;
  --y-font-xxl: 1.5rem;
  --y-font-xxxl: 1.875rem;
  --y-font-4xl: 2.25rem;

  /* ── FONT WEIGHTS ─────────────────────── */
  --y-weight-light: 300;
  --y-weight-regular: 400;
  --y-weight-medium: 500;
  --y-weight-semibold: 600;
  --y-weight-bold: 700;
  --y-weight-extrabold: 800;
  --y-weight-black: 900;

  /* ── SPACING ──────────────────────────── */
  --y-space-xs: 0.25rem;
  --y-space-s: 0.5rem;
  --y-space-m: 0.75rem;
  --y-space-l: 1rem;
  --y-space-xl: 1.25rem;
  --y-space-xxl: 1.5rem;
  --y-space-3xl: 2rem;
  --y-space-4xl: 2.5rem;
  --y-space-5xl: 3rem;
  --y-space-6xl: 4rem;
  --y-space-7xl: 4.5rem;
  --y-space-8xl: 5rem;
  --y-space-9xl: 5.5rem;
  --y-space-10xl: 6rem;

  /* ── BORDER RADIUS ────────────────────── */
  --y-radius-s: 0.375rem;
  --y-radius-m: 0.5rem;
  --y-radius-l: 0.75rem;
  --y-radius-xl: 1.25rem;
  --y-radius-2xl: 1.5rem;
  --y-radius-full: 9999px;
  --radius: var(--y-radius-l);
  --radius-xl: var(--y-radius-xl);
  --radius-2xl: var(--y-radius-2xl);

  /* ── SHADOWS ──────────────────────────── */
  --y-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.08);
  --y-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.1);
  --y-shadow-l: 0 10px 30px rgba(0, 0, 0, 0.12);
  --y-shadow-gold: 0 8px 25px rgba(139, 105, 20, 0.25);
  --y-shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* ── TRANSITIONS ──────────────────────── */
  --y-transition-fast: 0.15s ease;
  --y-transition-normal: 0.25s ease;
  --y-transition-slow: 0.4s ease;
  --y-transition-smooth: 0.3s ease;
  --y-transition-long: 0.5s ease;
  --y-transition-spring: 0.7s ease;

  /* ── Z-INDEX ──────────────────────────── */
  --y-z-dropdown: 100;
  --y-z-sticky: 200;
  --y-z-overlay: 300;
  --y-z-modal: 400;
  --y-z-toast: 500;

  /* ── LAYOUT ───────────────────────────── */
  --y-container-max: 1280px;
  --y-header-height: 64px;

  /*
    BREAKPOINTS (reference — used in @media queries)
    xs  — max-width: 480px    → small phones
    sm  — max-width: 768px    → phones / landscape
    md  — max-width: 992px    → tablets
    lg  — max-width: 1200px   → small desktops
    xl  — min-width: 1201px   → large desktops (default)
  */
}