:root {
  /* ==========================================================================
     1. BRAND & STATUS COLORS
     ========================================================================== */
  
  /* Primary Brand */
  --color-primary:              #1570EF;                     /* Main brand blue: Primary buttons, active tabs */
  --color-primary-hover:        #2E7DF2;                     /* Lighter blue: Button hover states */
  --color-primary-loading:      #0654BC;                     /* Darker blue: Button active/loading states */
  --color-primary-shadow:       #0749A2;                     /* Deep blue: Primary button shadows and inner rings */
  --focus-ring:                 #FFFFFF;                     /* Accessibility: Keyboard navigation focus outline */

  /* Global Status */
  --color-success:              #4ADE80;                     /* Green: Passed validation, success metrics */
  --color-danger:               #F87171;                     /* Red: Failed validation, error text, warnings */
  --color-warning:              #FBBF24;                     /* Yellow: Pending states, cautionary alerts */


  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================== */
  
  /* Family */
  --font-primary:               'Inter', sans-serif;         /* Global UI typeface */

  /* Colors */
  --text-primary:               #FAFAFA;                   /* High-contrast white: Main headings, core row data */
  --text-secondary:             #D1D1D6;                   /* Muted gray: Subtext, table metadata, idle icons */
  --text-tertiary:              #98A2B3;                   /* Dark gray: Placeholders, disabled text, low emphasis */

  /* Scale */
  --font-xs:                    12px;                        /* Micro: Status pills, section labels, micro-metrics, form errors */
  --font-sm:                    14px;                        /* Regular: Table headers, table row data, sidebar items, inputs */
  --font-md:                    16px;                        /* Body/Action: Primary buttons, tabs, form labels, active menus */
  --font-lg:                    20px;                        /* Sub-heading: Section blocks ("Validation Result"), login title */
  --font-xl:                    24px;                        /* Heading: Core page view titles ("Asset Validator") */
  --font-xxl:                   32px;                        /* Display: Massive metric card numbers ("50", "100%") */

  /* Weights */
  --weight-regular:             400;                         /* Default body: Table row data, inputs, placeholders, subtext */
  --weight-medium:              500;                         /* Subtle emphasis: Sidebar labels, utility/pagination text */
  --weight-semibold:            600;                         /* Action & Structure: Buttons, table headers, micro-metrics */
  --weight-bold:                700;                         /* Display focus: Login page titles, massive metric numbers */


  /* ==========================================================================
     3. BACKGROUNDS & SURFACES
     ========================================================================== */
  
  /* Base Layers */
  --bg-pure-black:              #000000;                     /* Deepest background layer: Main app canvas */
  --bg-dark-surface:            #18191E;                     /* Deep solid charcoal: Solid panels, view toggles */
  --bg-overlay:                 rgba(0, 0, 0, 0.4);          /* Full-screen darkening: Modal backdrops */
  --bg-overlay-heavy:           rgba(0, 0, 0, 0.85);         /* Deep full-screen darkening for Lightbox *

  /* Panels & Glass */
  --bg-dashboard:               rgba(255, 255, 255, 0.10);   /* Base panel color: Sidebar, right panels */
  --bg-glass-panel:             rgba(19, 19, 22, 0.6);       /* Frosted glass base: Login screen card */
  --bg-dropzone-hover:          #24262E;                     /* Lighter solid charcoal for drag hover */
  --bg-raised-surface:          #2F3138;                     /* Lighter elevated charcoal for active toggles */

  /* Interactive States */
  --bg-hover:                   rgba(255, 255, 255, 0.05);   /* Subtle glow: Flat list items, nav item hover */
  --bg-action-hover:            rgba(255, 255, 255, 0.10);   /* Elevated glow: Utility button hover (Notifs, Add Files) */
  --bg-selected-row:            rgba(21, 112, 239, 0.15);    /* Brand tint: #1570EF at 15% for selected table rows */

  /* Inputs */
  --bg-input-idle:              rgba(0, 0, 0, 0.20);         /* Dark inset well for idle text inputs */


  /* ==========================================================================
     4. BORDERS & DIVIDERS
     ========================================================================== */
  
  /* Structural */
  --border-dashboard:           rgba(255, 255, 255, 0.20);   /* White at 20%: Panel borders, secondary button outlines */
  --border-subtle:              #374151;                     /* Dark gray: Standard section dividers */
  --border-tree:                rgba(255, 255, 255, 0.15);   /* White at 15%: Sub-menu branch connection lines */
  --border-input-default:       #374151;                     /* Clean dark theme border for idle input fields */

  /* Interactive */
  --border-interactive-hover:   rgba(255, 255, 255, 0.20);   /* Action states: Secondary button outline glow on hover */
  --border-selected-row:        #1570EF;                     /* Solid brand blue: Focus outline tracking selected rows */

  /* Glassmorphism Details */
  --glass-border-base:          rgba(255, 255, 255, 0.03);   /* Faint overall rim light for glass panels */
  --glass-border-top:           rgba(255, 255, 255, 0.12);   /* Stronger top highlight for overhead light illusion */
  --glass-border-left:          rgba(255, 255, 255, 0.08);   /* Medium left highlight for directional lighting */


  /* ==========================================================================
     5. ELEVATION & SHADOWS
     ========================================================================== */
  
  /* Structural Scale */
  --shadow-sm:                  0px 2px 8px rgba(0, 0, 0, 0.3);   /* Floating utilities: Toggle buttons, small elements */
  --shadow-md:                  0px 4px 12px rgba(0, 0, 0, 0.4);  /* Mid-level pop: Hover spans, tooltips */
  --shadow-lg:                  0px 8px 28px rgba(1, 5, 17, 0.3); /* Heavy separation: Dashboard sidebar, main dropdowns */
  --shadow-panel:               rgba(0, 0, 0, 0.5);               /* Deepest drop: Login glass panel container */

  /* Interactive */
  --shadow-btn-hover:           rgba(0, 0, 0, 0.15);              /* Outward glow: Button hover state */
  --shadow-btn-active:          rgba(0, 0, 0, 0.1);               /* Tighter glow: Button active/pressed state */


  /* ==========================================================================
     6. COMPONENT SPECIFIC: STATUS PILLS
     ========================================================================== */
  
  /* Passed */
  --pill-passed-bg:             #0B130E;                     /* Dark green tint for capsule base */
  --pill-passed-border:         rgba(34, 197, 94, 0.40);     /* #22C55E at 40% for capsule outline */
  --pill-passed-text:           #4ADE80;                     /* Bright green for 'PASSED' text */

  /* Failed */
  --pill-failed-bg:             #140C0C;                     /* Dark red tint for capsule base */
  --pill-failed-border:         rgba(239, 68, 68, 0.40);     /* #EF4444 at 40% for capsule outline */
  --pill-failed-text:           #F87171;                     /* Bright red for 'FAILED' text */

  /* Processing */
  --pill-processing-bg:         #0C1017;                     /* Dark blue tint for capsule base */
  --pill-processing-border:     rgba(59, 130, 246, 0.45);    /* #3B82F6 at 45% for capsule outline */
  --pill-processing-text:       #60A5FA;                     /* Bright blue for 'PROCESSING' text */
  --pill-processing-glow:       rgba(59, 130, 246, 0.20);    /* Soft blue outer glow for active state */
}