/* ================================
   CSS VARIABLES & DESIGN TOKENS
   ================================ */

/* CUSTOM FONT FACE */
@font-face {
  font-family: 'Alagard';
  src: url('../font/alagard/alagard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* COLORS - INFERNO (Red) */
  --color-inferno: #f44747;
  --color-inferno-hover: #d13636;
  --color-inferno-light: #ff6a6a;

  /* COLORS - PURGATORY (Blue) */
  --color-purgatory: #7aa2f7;
  --color-purgatory-hover: #a5c8fa;

  /* COLORS - PARADISE (Gold) */
  --color-paradise: #dab87e;
  --color-paradise-hover: #f3dba4;
  --color-paradise-dark: #c0a062;

  /* COLORS - LORE (Purple) */
  --color-lore: #9141ac;
  --color-lore-hover: #b672d6;

  /* GRAYSCALE */
  --color-black: #0f0f0f;
  --color-dark: #0d0d0d;
  --color-darker: #121212;
  --color-gray-darkest: #222;
  --color-gray-darker: #2a2a2a;
  --color-gray-dark: #333;
  --color-gray-mid: #444;
  --color-gray: #aaa;
  --color-gray-light: #e0e0e0;
  --color-gray-lighter: #f0f0f0;
  --color-white: #fff;

  /* TEXT COLORS */
  --text-primary: #e0e0e0;
  --text-secondary: #aaa;
  --text-muted: #666;
  --text-white: #f0f0f0;

  /* BACKGROUND COLORS */
  --bg-dark: #0f0f0f;
  --bg-darker: #0d0d0d;
  --bg-section: #121212;

  /* BORDER COLORS */
  --border-light: rgba(255, 255, 255, 0.4);
  --border-lighter: rgba(255, 255, 255, 0.8);
  --border-dark: #333;
  --border-darker: #222;

  /* SHADOWS */
  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-large: 0 12px 24px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 0 30px rgba(192, 160, 98, 0.1);

  /* GLOW EFFECTS */
  --glow-inferno: 0 0 6px var(--color-inferno);
  --glow-inferno-large: 0 0 8px var(--color-inferno);
  --glow-purgatory: 0 0 6px var(--color-purgatory);
  --glow-purgatory-large: 0 0 8px var(--color-purgatory);
  --glow-paradise: 0 0 6px var(--color-paradise);
  --glow-paradise-large: 0 0 8px var(--color-paradise);
  --glow-lore: 0 0 6px var(--color-lore);
  --glow-lore-large: 0 0 8px var(--color-lore);

  /* SPACING */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* BORDER RADIUS */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* TRANSITIONS */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;
  --transition-cubic: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* FONT FAMILIES */
  --font-title: 'Cinzel', serif;
  --font-pixel: 'Alagard', sans-serif;
  --font-tech: 'Courier New', Courier, monospace;
  --font-script: 'Tangerine', cursive;

   /* REFINED DESIGN TOKENS (Modernized) */
  --bg-card: #151515;
  --bg-card-hover: #1a1a1a;
  
  --gradient-card: linear-gradient(to bottom, transparent 0%, rgba(20, 20, 20, 0.9) 100%);
  --gradient-glow: radial-gradient(circle, rgba(244, 71, 71, 0.15) 0%, rgba(15, 15, 15, 0) 70%); /* Inferno Red Glow */
  
  --shadow-glow: 0 0 30px rgba(244, 71, 71, 0.2);
  --shadow-glow-strong: 0 0 50px rgba(244, 71, 71, 0.4);
}