/* ==============================================
   BASE DESIGN SYSTEM TOKENS
   ============================================== */
/* SkillTrees Design System
   Single source of truth for all CSS variables.
   All other CSS files should reference these variables. */

:root {
   /* ==============================================
      BRAND COLORS (Primary Palette)
      ============================================== */

   /* Primary Colors */
   --color-primary-text: #EEFDF9;
   /* Main text color for high contrast on dark backgrounds */
   --color-dark-bg: #1b1c1d;
   /* Dark background color for main containers */
   --color-secondary-bg: #282a2c;
   /* Secondary background color for cards and modals */

   /* Interactive States */
   --color-inactive: rgba(238, 253, 249, 0.063);
   /* Color for inactive elements that you can't click */
   --color-hover: #37393b;
   /* Color for hover state for background of buttons or elements with --color-secondary-bg in hover */
   --color-active: #656A6B;
   /* Color for active state for background of buttons or elements with --color-secondary-bg in active */

   /* Accent Colors */
   --color-accent-blue: #004ba8;
   --color-hover-blue: #143B6A;
   --color-error-red: #FF681F;
   --color-light-blue: #7fd2ed;
   /* Accent color for text that can be clicked, but doesn't have a container (example: links to the terms of service which are inline text links) */
   --color-button-active: #004ba8;
   /* Color for buttons when active */
   --color-success-green: #10b981;
   /* Color for success states, checkboxes, and positive actions */
   --color-success-green-light: rgba(16, 185, 129, 0.2);
   /* Light overlay for success state focus rings */

   /* Secondary Text Colors */
   --color-muted-text: #9ca3af;
   /* Muted/secondary text for reduced emphasis */
   --color-muted-text-light: #b4b7bd;
   /* Lighter muted text */
   --color-muted-text-dark: #6b7280;
   /* Darker muted text for subtle information */

   /* Component Colors */
   --color-modal-backdrop: rgba(0, 0, 0, 0.4);
   /* Semi-transparent backdrop for modals */
   --color-border-subtle: #374151;
   /* Subtle borders and dividers */

   /* ==============================================
      SEMANTIC BACKGROUND ALIASES
      ============================================== */
   --bg-primary: #0a0a0a;
   /* Pure black background */
   --bg-secondary: #1a1a1a;
   /* Dark grey background - unified modal background */
   --bg-tertiary: #2a2a2a;
   /* Lighter dark background */
   --bg-modal: #1a1a1a;
   /* Modal background - unified */
   --bg-card: #242424;
   /* Card/content background */
   --bg-input: #1e1e1e;
   /* Input field background */
   --bg-button: #2d2d2d;
   /* Button background */
   --bg-button-hover: #3a3a3a;
   /* Button hover background */
   --bg-accent: #D9D9D950;
   /* Accent button/element background */
   --bg-accent-hover: #03a3b1;
   /* Accent hover state */
   --bg-success: #4a9eff;
   /* Success state background */
   --bg-danger: #ee2e24;
   /* Error/danger state background */
   --bg-warning: #fdb714;
   /* Warning state background */
   --container-bg: #EEFDF920;
   /* Container background (20% opacity primary text) */
   --container-bg-hover: #EEFDF930;
   /* Container hover background (30% opacity) */

   /* ==============================================
      TEXT COLOR ALIASES
      ============================================== */
   --text-primary: #EEFDF9;
   /* Primary text - same as --color-primary-text */
   --text-secondary: #EEFDF9;
   /* Secondary text - unified */
   --text-muted: #9ca3af;
   /* Muted grey text */
   --text-accent: #4a9eff;
   /* Accent text color */
   --text-on-accent: #ffffff;
   /* Text on accent backgrounds */

   /* ==============================================
      BORDERS
      ============================================== */
   --border-primary: #3a3a3a;
   /* Primary border color */
   --border-secondary: #2a2a2a;
   /* Secondary border color */
   --border-accent: #03a3b1;
   /* Accent border color */

   /* ==============================================
      BORDER RADIUS
      ============================================== */
   --border-radius: 12px;
   /* Standard border radius */
   --border-radius-sm: 8px;
   /* Small border radius */
   --border-radius-lg: 16px;
   /* Large border radius */

   /* ==============================================
      MODAL ELEMENT COLORS
      ============================================== */
   --modal-text-white: #EEFDF9;
   --modal-element-bg: #EEFDF910;
   /* 10% opacity for unselected */
   --modal-element-bg-equipment: #EEFDF970;
   --modal-element-bg-hover: #EEFDF950;
   /* 50% opacity for selected/hover */
   --modal-element-bg-hover-equipment: #EEFDF950;

   /* ==============================================
      SHADOWS
      ============================================== */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
   --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.25);
   --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.35);

   /* ==============================================
      SPACING
      ============================================== */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 48px;

   /* ==============================================
      TYPOGRAPHY
      ============================================== */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family: 'Inter', sans-serif;
   /* Alias for compatibility */
   --font-size-xs: 12px;
   --font-size-sm: 16px;
   --font-size-md: 16px;
   --font-size-lg: 24px;
   --font-size-xl: 24px;
   --font-size-2xl: 24px;
   --font-size-3xl: 36px;
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ==============================================
      TRANSITIONS
      ============================================== */
   --transition-fast: 0.15s ease;
   --transition-normal: 0.25s ease;
   --transition-slow: 0.35s ease;

   /* ==============================================
      Z-INDEX LAYERS
      ============================================== */
   --z-modal: 10001;
   --z-modal-backdrop: 10000;
   --z-dropdown: 500;
   --z-header: 100;
   --z-base: 1;
}