/* Codex Artificialis — Design Tokens */

:root {
  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #111113;
  --bg-surface: #1a1a1a;
  --bg-surface-hover: #1e1e1e;
  --bg-elevated: #242424;

  /* Text */
  --text-primary: #e8e6e3;
  --text-secondary: #94918b;
  --text-muted: #5a5753;
  --text-dim: #3a3835;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(212, 175, 55, 0.3);

  /* Gold (primary accent) */
  --gold: #D4AF37;
  --gold-bright: #FFD700;
  --gold-dim: rgba(212, 175, 55, 0.6);
  --gold-glow: rgba(212, 175, 55, 0.15);
  --gold-gradient: linear-gradient(135deg, #D4AF37, #FFD700, #D4AF37);

  /* Deep Purple */
  --purple-deep: #2D0A4E;
  --purple-bright: #B026FF;
  --purple-glow: rgba(176, 38, 255, 0.2);

  /* Cyan */
  --cyan: #00FFFF;
  --cyan-dim: #00BFFF;
  --cyan-glow: rgba(0, 191, 255, 0.2);

  /* Emerald */
  --emerald: #39FF14;
  --emerald-glow: rgba(57, 255, 20, 0.2);

  /* Blood Red */
  --red-blood: #8B0000;
  --red-dark: #6B0000;
  --red-seal: #4A0000;

  /* Pack-specific */
  --aubergine: #1A0A2E;
  --verdigris: #2E4A3A;
  --grey-purple: #2D0A2E;

  /* Section accent colors */
  --section-0: #FF1493; /* Archetypes & Myths */
  --section-1: #39FF14; /* Model Bestiary */
  --section-2: #00FFFF; /* Interaction Patterns */
  --section-3: #FFE600; /* Human Figures */
  --section-4: #B026FF; /* Artifacts & Objects */
  --section-5: #FF6B35; /* Historic Moments */

  /* Rarity colors */
  --rarity-common: #888888;
  --rarity-uncommon: #39FF14;
  --rarity-rare: #00BFFF;
  --rarity-epic: #B026FF;
  --rarity-legendary: #FFD700;

  /* Typography */
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-body: 'Source Serif 4', 'Source Serif Pro', 'Libre Baskerville', serif;
  --font-mono: 'Fira Code', 'Space Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

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

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Layout */
  --header-h: 64px;
  --nav-h: 52px;
  --container-max: 1200px;
  --card-ratio: 2 / 3;

  /* Z-index scale */
  --z-base: 1;
  --z-nav: 100;
  --z-header: 200;
  --z-altar: 300;
  --z-modal: 1000;
  --z-pack: 1100;
  --z-tooltip: 1200;
}