/* ===== DESIGN TOKENS — Light Theme ===== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&display=swap');

:root {
  /* --- Backgrounds --- */
  --color-bg-primary:    #F2F2F2;
  --color-bg-secondary:  #FFFFFF;
  --color-bg-tertiary:   #FFFFFF;
  --color-bg-elevated:   #FFFFFF;

  /* --- Text --- */
  --color-text-primary:   #3B3B3B;
  --color-text-secondary: #6B6B6B;
  --color-text-muted:     #9E9E9E;

  /* --- Accent (gold) --- */
  --color-accent:         #DCAD00;
  --color-accent-light:   #C49A00;
  --color-accent-muted:   rgba(220, 173, 0, 0.12);

  /* --- Borders --- */
  --color-border:         #E0E0E0;
  --color-border-light:   #D0D0D0;
  --color-divider:        #E8E8E8;

  /* --- Legacy aliases (keeps old selectors working) --- */
  --color-primary:        #F2F2F2;
  --color-primary-light:  #FFFFFF;
  --color-white:          #3B3B3B;
  --color-gray:           #3B3B3B;
  --color-gray-light:     #6B6B6B;
  --color-gray-dark:      #E0E0E0;
  --color-surface:        rgba(255, 255, 255, 0.95);

  /* --- Typography --- */
  --font-primary:       'Heebo', sans-serif;
  --font-size-base:     1rem;
  --font-size-sm:       0.875rem;
  --font-size-lg:       1.25rem;
  --font-size-xl:       2rem;
  --font-size-2xl:      3rem;
  --font-size-3xl:      4.5rem;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* --- Spacing (8px base) --- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 8rem;

  /* --- Layout --- */
  --nav-height:        72px;
  --container-max:     1200px;
  --container-padding: var(--space-md);
  --section-padding:   var(--space-xl) 0;

  /* --- Border Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Transitions --- */
  --transition-fast: 200ms ease;
  --transition-base: 350ms ease;
  --transition-slow: 600ms ease;

  /* --- Shadows & Effects --- */
  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md:           0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:           0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-hover:        0 8px 24px rgba(0, 0, 0, 0.12);
  --glow-gold:           0 2px 8px rgba(0, 0, 0, 0.08);
  --glow-gold-strong:    0 4px 16px rgba(0, 0, 0, 0.12);
  --glow-gold-subtle:    0 1px 3px rgba(0, 0, 0, 0.06);
  --gradient-card:       none;
  --gradient-gold-line:  linear-gradient(90deg, transparent, var(--color-accent), transparent);

  /* --- Z-index scale --- */
  --z-content:      10;
  --z-nav:          100;
  --z-overlay:      200;
  --z-modal:        300;
}