:root {

  /* ============================================================
     BRAND PALETTE
  ============================================================ */
  --color-gold:           #C9A86C;
  --color-gold-dark:      #A8843A;
  --color-gold-light:     #F5F0E8;
  --color-black:          #0F1F1A;
  --color-white:          #FFFFFF;

  /* ============================================================
     NEUTRAL SCALE
  ============================================================ */
  --color-neutral-50:     #FAFAFA;
  --color-neutral-100:    #F5F5F5;
  --color-neutral-200:    #E5E5E5;
  --color-neutral-300:    #D4D4D4;
  --color-neutral-400:    #A3A3A3;
  --color-neutral-500:    #737373;
  --color-neutral-600:    #525252;
  --color-neutral-700:    #404040;
  --color-neutral-800:    #262626;
  --color-neutral-900:    #171717;

  /* ============================================================
     SEMANTIC COLOR ROLES
  ============================================================ */
  --color-bg:             #F8F6F1;
  --color-bg-subtle:      #EFECE5;
  --color-bg-inverse:     var(--color-black);
  --color-bg-accent:      var(--color-gold-light);

  --color-text-primary:   var(--color-black);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-400);
  --color-text-inverse:   var(--color-white);
  --color-text-accent:    var(--color-gold);
  --color-text-on-gold:   var(--color-black);

  --color-accent:         var(--color-gold);
  --color-accent-hover:   var(--color-gold-dark);

  --color-border:         var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);

  /* ============================================================
     TYPOGRAPHY
  ============================================================ */
  --font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;
  --font-size-7xl:  4.5rem;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   1.75;

  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.025em;
  --letter-spacing-wider:    0.05em;
  --letter-spacing-widest:   0.1em;

  /* ============================================================
     SPACING SCALE  (base-4, rem units)
  ============================================================ */
  --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;

  /* ============================================================
     BORDER RADIUS
  ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
  ============================================================ */
  --shadow-sm: 0 1px 2px rgba(15, 31, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 31, 26, 0.09);
  --shadow-lg: 0 8px 24px rgba(15, 31, 26, 0.11);
  --shadow-xl: 0 16px 48px rgba(15, 31, 26, 0.14);

  /* ============================================================
     LAYOUT
  ============================================================ */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-padding: var(--space-6);
  --sidebar-width:     380px;

  /* ============================================================
     ANIMATION
  ============================================================ */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  --motion-offset-sm: 12px;
  --motion-offset-md: 28px;
  --motion-offset-lg: 32px;
  --hover-lift:       4px;

  /* ============================================================
     Z-INDEX SCALE
  ============================================================ */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
}