:root {
  /* Brand Colors */
  --color-primary: #0a0a0f;
  --color-secondary: #12121a;
  --color-surface: #1a1a26;
  --color-surface-2: #22222f;
  --color-border: rgba(255,255,255,0.08);

  --color-accent: #e8b84b;
  --color-accent-hover: #f5cc6a;
  --color-accent-2: #6c5ce7;
  --color-accent-3: #00cec9;

  --color-shinryu: #c0392b;
  --color-shinryu-light: #e74c3c;
  --color-finecolors: #2980b9;
  --color-finecolors-light: #3498db;

  --color-text: #f0f0f0;
  --color-text-muted: #888899;
  --color-text-dim: #555566;

  /* Typography */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', var(--font-en);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Layout */
  --container: 1200px;
  --nav-height: 70px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.3s var(--ease);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --glow-accent: 0 0 40px rgba(232,184,75,0.25);
}