/**
 * Axon Design System - CSS Variables
 *
 * Single source of truth for all design tokens.
 * Both app.css and admin.css should import this file.
 */

:root {
  /* ===========================================
     COLOR PALETTE
     =========================================== */

  /* Backgrounds */
  --bg-dark: #0f0f0f;                        /* Primary background */
  --bg-panel: #1a1a1a;                       /* Cards, sidebars (solid) */
  --bg-panel-glass: rgba(23, 25, 30, 0.7);   /* Glassmorphic panels */
  --bg-hover: rgba(255, 255, 255, 0.05);     /* Hover states */
  --bg-input: rgba(255, 255, 255, 0.03);     /* Input backgrounds */

  /* ===========================================
     BRAND COLORS (Dynamically set by branding.js)
     =========================================== */

  /* These are overridden dynamically via JavaScript for white-label support */
  --brand-primary: #2563eb;              /* Primary brand color */
  --brand-primary-hover: #1d4ed8;        /* Hover state */
  --brand-primary-glow: rgba(37, 99, 235, 0.4);
  --brand-primary-subtle: rgba(37, 99, 235, 0.1);
  --brand-secondary: #1e40af;            /* Secondary brand color */

  /* Primary Accent - Uses brand colors for white-label support */
  --accent-primary: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  --accent-glow: var(--brand-primary-glow);
  --accent-subtle: var(--brand-primary-subtle);

  /* Text Colors */
  --text-main: #ececec;                      /* Primary text */
  --text-muted: #9ca3af;                     /* Secondary text */
  --text-dim: #6b7280;                       /* Tertiary/hints */

  /* Semantic Colors */
  --color-error: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-success: #10a37f;
  --color-success-bg: rgba(16, 163, 127, 0.1);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.1);

  /* Borders */
  --border-light: rgba(255, 255, 255, 0.08); /* Subtle borders */
  --border-solid: #333;                      /* Solid borders */

  /* ===========================================
     TYPOGRAPHY
     =========================================== */

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* ===========================================
     EFFECTS
     =========================================== */

  --glass-blur: blur(16px);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 4px 12px var(--accent-glow);

  /* ===========================================
     SPACING
     =========================================== */

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

  /* ===========================================
     BORDER RADIUS
     =========================================== */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-round: 20px;
  --radius-full: 9999px;

  /* ===========================================
     Z-INDEX SCALE
     =========================================== */

  --z-dropdown: 100;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-toast: 1000;
}