:root {
  /* === COLORS === */
  --color-bg:              #F5F3F0;
  --color-bg-alt:          #FDFCFB;
  --color-text:            #1A1A1A;
  --color-text-muted:      #666666;
  --color-text-subtle:     #999999;
  --color-white:           #FFFFFF;

  --color-gold:            #C4A874;
  --color-gold-hover:      #D4B884;
  --color-gold-light:      #F0E8D8;
  --color-gold-dark:       #A8905E;
  --color-sage:            #B8C5B6;
  --color-sage-dark:       #8A9B88;
  --color-sage-light:      #EBF0EA;
  --color-navy:            #0F172A;
  --color-navy-light:      #1E2D47;
  --color-terracotta:      #E07A5F;
  --color-terracotta-hover:#CC6B50;
  --color-terracotta-light:#FAF0EC;
  --color-amazon:          #FF9900;
  --color-amazon-hover:    #E08900;

  /* Pillar colors */
  --pillar-stabilize:      #0F172A;
  --pillar-regulate:       #B8C5B6;
  --pillar-rebuild:        #C4A874;
  --pillar-adapt:          #8A9B88;
  --pillar-thrive:         #E07A5F;

  /* Pillar light tints */
  --pillar-stabilize-light:#E8EBF0;
  --pillar-regulate-light: #EBF0EA;
  --pillar-rebuild-light:  #F5EDD8;
  --pillar-adapt-light:    #EBF0EA;
  --pillar-thrive-light:   #FAF0EC;

  /* UI colors */
  --color-border:          rgba(26,26,26,0.12);
  --color-border-light:    rgba(26,26,26,0.06);
  --color-shadow:          rgba(26,26,26,0.08);
  --color-shadow-md:       rgba(26,26,26,0.14);
  --color-shadow-lg:       rgba(26,26,26,0.20);

  /* === TYPOGRAPHY === */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-metric:  'Tenor Sans', Georgia, serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;
  --leading-loose:  1.9;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* === 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;

  /* Section padding */
  --section-padding-sm: var(--space-12) 0;
  --section-padding-md: var(--space-20) 0;
  --section-padding-lg: var(--space-32) 0;

  /* === LAYOUT === */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

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

  /* === SHADOWS === */
  --shadow-sm:  0 1px 4px var(--color-shadow);
  --shadow-md:  0 4px 16px var(--color-shadow);
  --shadow-lg:  0 8px 32px var(--color-shadow-md);
  --shadow-xl:  0 16px 48px var(--color-shadow-lg);

  /* === CARD TOKENS === */
  --card-bg:            var(--color-white);
  --card-border:        var(--color-border-light);
  --card-shadow:        var(--shadow-md);
  --card-shadow-hover:  var(--shadow-lg);
  --card-radius:        var(--radius-lg);
  --card-padding:       var(--space-8);

  /* === NAVIGATION === */
  --nav-height:         80px;
  --nav-height-scrolled:64px;
  --nav-bg:             rgba(245,243,240,0.96);
  --nav-bg-scrolled:    rgba(245,243,240,0.98);
  --nav-border:         var(--color-border-light);

  /* === BUTTONS === */
  --btn-primary-bg:        var(--color-gold);
  --btn-primary-hover:     var(--color-gold-hover);
  --btn-primary-text:      var(--color-navy);
  --btn-secondary-border:  var(--color-navy);
  --btn-secondary-text:    var(--color-navy);
  --btn-amazon-bg:         var(--color-amazon);
  --btn-amazon-text:       var(--color-navy);

  /* === ANIMATION === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* === Z-INDEX === */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-nav:     1000;
  --z-modal:   2000;
  --z-toast:   3000;
}