/**
 * MOLLE Design System — Colors Foundation
 * Style: Tactical Minimalism & Dark Industrial Aesthetic
 */

:root {
  /* Core Brand Colors */
  --molle-bg: #050505;              /* Deep Tactical Black */
  --molle-surface: #111111;         /* Rugged Instrument Gray */
  --molle-surface-light: #1a1a1a;   /* Tactical Highlight Surface */
  --molle-accent: #db9c58;          /* Military Brass / Coyote Brown */
  
  /* Typography Colors */
  --molle-text-primary: #f2f2f2;    /* Stencil White */
  --molle-text-secondary: #9ca3af;  /* Low-Viz Grey */
  --molle-text-muted: #6b7280;     /* Stealth Grey */
  
  /* Borders and Dividers */
  --molle-border: #1f1f1f;          /* Low-Viz Boundary Divider */
  --molle-border-accent: #3a2818;   /* Muted Coyote Divider */
  --molle-border-light: #2b2b2b;    /* High-contrast divider */

  /* Functional Status Colors */
  --molle-error: #ef4444;           /* Danger / Warning Stencil Red */
  --molle-success: #10b981;         /* Secure / Operational Green */

  /* ==========================================
     1. RADIUS TOKENS (Standardized Curvature)
     ========================================== */
  --molle-radius-tactical: 2px;  /* Standard chamfered rugged corners */
  --molle-radius-square: 0px;    /* Raw square geometry for sections/banners */
  --molle-radius-pill: 50%;      /* Concentric circles (bullets, badges, status) */

  /* ==========================================
     2. SHADOW TOKENS (Central Visual Elevation)
     ========================================== */
  --molle-shadow-focus: 0 0 12px rgba(219, 156, 88, 0.25);        /* Accent glow */
  --molle-shadow-danger-focus: 0 0 12px rgba(239, 68, 68, 0.25);  /* Error glow */
  --molle-shadow-success-focus: 0 0 12px rgba(16, 185, 129, 0.25);/* Success glow */
  --molle-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);             /* Float elevation */
  --molle-shadow-card-hover: 0 4px 20px rgba(219, 156, 88, 0.1);  /* Accent focus float */
  --molle-shadow-overlay: 0 20px 40px rgba(0, 0, 0, 0.8);         /* Modal / Drawer shadow */

  /* ==========================================
     3. Z-INDEX TOKENS (Centralized Layers Stack)
     ========================================== */
  --molle-z-index-base: 1;
  --molle-z-index-raised: 2;
  --molle-z-index-interactive: 10;
  --molle-z-index-header: 1000;
  --molle-z-index-header-sticky: 1010;
  --molle-z-index-overlay: 1040;
  --molle-z-index-drawer: 1050;
  --molle-z-index-modal: 1060;
  --molle-z-index-toast: 1100;

  /* ==========================================
     4. MOTION TOKENS (Tactical Beziers & Timings)
     ========================================== */
  --molle-motion-bezier-tactical: cubic-bezier(0.16, 1, 0.3, 1);  /* Smooth industrial curve */
  --molle-motion-bezier-snappy: cubic-bezier(0.1, 0.9, 0.2, 1);   /* Snappy pointer reactions */
  --molle-motion-dur-fast: 0.15s;                                 /* Interactive hovers */
  --molle-motion-dur-standard: 0.2s;                              /* Sliders / validation glows */
  --molle-motion-dur-slow: 0.3s;                                  /* Overlay drawers / slide entries */
}

/* Background Utility Classes */
.bg-molle-dark { background-color: var(--molle-bg) !important; }
.bg-molle-surface { background-color: var(--molle-surface) !important; }
.bg-molle-surface-light { background-color: var(--molle-surface-light) !important; }
.bg-molle-accent { background-color: var(--molle-accent) !important; }

/* Namespaced Background Utility Classes */
.molle-u-bg-dark { background-color: var(--molle-bg) !important; }
.molle-u-bg-surface { background-color: var(--molle-surface) !important; }
.molle-u-bg-surface-light { background-color: var(--molle-surface-light) !important; }
.molle-u-bg-accent { background-color: var(--molle-accent) !important; }

/* Text Utility Classes */
.text-molle-primary { color: var(--molle-text-primary) !important; }
.text-molle-secondary { color: var(--molle-text-secondary) !important; }
.text-molle-accent { color: var(--molle-accent) !important; }
.text-molle-muted { color: var(--molle-text-muted) !important; }

/* Namespaced Text Utility Classes */
.molle-u-text-primary { color: var(--molle-text-primary) !important; }
.molle-u-text-secondary { color: var(--molle-text-secondary) !important; }
.molle-u-text-accent { color: var(--molle-accent) !important; }
.molle-u-text-muted { color: var(--molle-text-muted) !important; }

/* Border Utility Classes */
.border-molle { border: 1px solid var(--molle-border) !important; }
.border-molle-accent { border: 1px solid var(--molle-border-accent) !important; }

/* Namespaced Border Utility Classes */
.molle-u-border { border: 1px solid var(--molle-border) !important; }
.molle-u-border-accent { border: 1px solid var(--molle-border-accent) !important; }