/* =============================================
   DESIGN TOKENS & CSS VARIABLES
   opcartas
============================================= */
:root {
  /* Core Palette */
  --c-black:       #0b0b0c;
  --c-dark:        #16161a;
  --c-dark-2:      #1e1e24;
  --c-dark-3:      #26262e;
  --c-red:         #e63946;
  --c-red-glow:    rgba(230,57,70,0.35);
  --c-gold:        #d4af37;
  --c-gold-light:  #f0d060;
  --c-gold-glow:   rgba(212,175,55,0.35);
  --c-white:       #f8f9fa;
  --c-muted:       #8a8a9a;
  --c-border:      rgba(255,255,255,0.07);
  --c-border-gold: rgba(212,175,55,0.25);

  /* Typography */
  --font-head: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing (4px grid) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px;  --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px;  --sp-9: 88px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-gold: 0 0 24px var(--c-gold-glow), 0 0 8px var(--c-gold-glow);
  --shadow-red:  0 0 24px var(--c-red-glow);

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
  --t-slow: 0.4s ease;

  /* Layout */
  --header-h:  64px;
  --sidebar-w: 255px;
}