/* =============================================================================
   FANTASTIC FIGHTS TCG — Design Tokens
   WCAG AAA (7:1 contrast minimum) throughout
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Brand Colors
     --------------------------------------------------------------------------- */
  --color-crimson:        #FF1122;  /* Electric red */
  --color-crimson-dark:   #CC0010;  /* Hover / pressed */
  --color-crimson-deeper: #990008;  /* Active / focus ring */
  --color-crimson-glow:   rgba(255,17,34,0.35);
  --color-gold:           #FFD700;  /* Bright gold */
  --color-gold-light:     #FFE44D;
  --color-gold-dark:      #CC9D00;

  /* ---------------------------------------------------------------------------
     Neutral Palette
     --------------------------------------------------------------------------- */
  --color-void:      #000000;  /* Pure black */
  --color-abyss:     #0A0A0A;  /* Dark page bg */
  --color-deep:      #111111;  /* Card / panel bg */
  --color-surface:   #1A1A1A;  /* Elevated surface */
  --color-line:      #2A2A2A;  /* Borders */
  --color-muted:     #AAAAAA;  /* Disabled / placeholder — 9.4:1 on black (WCAG AAA) */
  --color-text-dim:  #DDDDDD;  /* Secondary text — 14:1 on black */
  --color-text:      #FFFFFF;  /* Primary text — pure white (21:1) */
  --color-white:     #FFFFFF;

  /* Light surface (rules/content areas) */
  --color-parchment:       #F7F3EA;
  --color-parchment-dark:  #EDE8DB;
  --color-ink:             #111118;  /* Body text on light */
  --color-ink-muted:       #3B3B52;

  /* ---------------------------------------------------------------------------
     Rarity Colors
     --------------------------------------------------------------------------- */
  --rarity-common:    #AAAAAA;
  --rarity-rare:      #2E9FD6;
  --rarity-epic:      #A335EE;
  --rarity-legendary: #FF8C00;

  /* ---------------------------------------------------------------------------
     Element Colors
     --------------------------------------------------------------------------- */
  --el-fire:      #FF4B1F;
  --el-water:     #1E90FF;
  --el-nature:    #3CB371;
  --el-lightning: #FFD700;
  --el-shadow:    #8B008B;
  --el-holy:      #FFD700;
  --el-arcane:    #9370DB;
  --el-frost:     #87CEEB;
  --el-earth:     #A0522D;
  --el-none:      #888888;

  /* ---------------------------------------------------------------------------
     Spacing Scale (8px base)
     --------------------------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */
  --font-display: 'Oswald', 'Helvetica Neue', sans-serif;
  --font-ui:      'Oswald', 'Helvetica Neue', sans-serif;
  --font-logo:    'Oswald', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ---------------------------------------------------------------------------
     Borders & Radius
     --------------------------------------------------------------------------- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     Shadows
     --------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.5);
  --shadow-crimson: 0 0 20px rgba(184,12,23,0.4);
  --shadow-gold:    0 0 20px rgba(212,168,67,0.3);

  /* ---------------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ---------------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-height-desktop: 80px;
  --header-height-mobile:  64px;

  --sidebar-width:     300px;
  --sidebar-collapsed: 0px;

  /* ---------------------------------------------------------------------------
     Z-index Scale
     --------------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-toast:   400;
}