/* ===== DESIGN TOKENS — Dark Theme ===== */

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

:root {
  /* --- Backgrounds --- */
  --color-bg-primary:    #0a0a0a;
  --color-bg-secondary:  #111111;
  --color-bg-tertiary:   #1a1a1a;
  --color-bg-elevated:   #222222;

  /* --- Text --- */
  --color-text-primary:   #F5F5F5;
  --color-text-secondary: #A0A0A0;
  --color-text-muted:     #666666;

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

  /* --- Borders --- */
  --color-border:         #2a2a2a;
  --color-border-light:   #333333;
  --color-divider:        #1f1f1f;

  /* --- Legacy aliases (keeps old selectors working) --- */
  --color-primary:        #0a0a0a;
  --color-primary-light:  #111111;
  --color-white:          #F5F5F5;
  --color-gray:           #F5F5F5;
  --color-gray-light:     #A0A0A0;
  --color-gray-dark:      #2a2a2a;
  --color-surface:        rgba(26, 26, 26, 0.9);

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

  /* --- Glows & Effects --- */
  --glow-gold:           0 0 20px rgba(220, 173, 0, 0.15);
  --glow-gold-strong:    0 0 40px rgba(220, 173, 0, 0.25);
  --glow-gold-subtle:    0 0 10px rgba(220, 173, 0, 0.08);
  --gradient-card:       linear-gradient(135deg, rgba(220,173,0,0.03) 0%, transparent 60%);
  --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;
}