/* ═══════════════════════════════════
   XO LOVE — Design Tokens
   Single source of truth for all styling
   ═══════════════════════════════════ */

:root {
  /* Colors */
  --xo-bg:             #0e0e0e;
  --xo-bg-card:        #161616;
  --xo-bg-elevated:    #1c1c1c;
  --xo-bg-input:       #1a1a1a;

  --xo-text:           #f0f0f0;
  --xo-text-secondary: #b0b0b0;
  --xo-text-muted:     #666;
  --xo-text-faint:     #444;

  --xo-accent:         #23dff7;
  --xo-accent-hover:   #1bc5db;
  --xo-accent-glow:    rgba(35, 223, 247, 0.15);
  --xo-accent-glow-strong: rgba(35, 223, 247, 0.25);

  --xo-gold:           #d4a853;
  --xo-gold-light:     #f0d78c;
  --xo-gold-glow:      rgba(212, 168, 83, 0.15);

  --xo-green:          #34d399;
  --xo-red:            #f87171;
  --xo-pink:           #ec4899;

  --xo-border:         #222;
  --xo-border-light:   #2a2a2a;

  /* Typography */
  --xo-font:           'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --xo-font-size:      15px;
  --xo-line-height:    1.6;

  /* Spacing */
  --xo-container:      1200px;
  --xo-gap:            20px;
  --xo-section-gap:    60px;

  /* Radii */
  --xo-radius:         12px;
  --xo-radius-sm:      8px;
  --xo-radius-pill:    20px;

  /* Shadows */
  --xo-shadow:         0 4px 24px rgba(0, 0, 0, 0.4);
  --xo-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --xo-transition:     0.2s ease;
  --xo-transition-slow: 0.3s ease;
}