:root {
    /* Primary / Brand Colors */
    --primary:        #2563eb;
    --primary-hover:  #1d4ed8;
    --primary-light:  #eff6ff;
    
    --primary-pos:        #2563eb;
    --primary-pos-hover:  #1d4ed8;
    --primary-pos-light:  #eff6ff;
    
    /* Semantic Colors */
    --success:        #10b981;
    --success-hover:  #059669;
    --success-light:  #ecfdf5;
    
    --warning:        #f59e0b;
    --warning-hover:  #d97706;
    --warning-light:  #fffbeb;
    
    --danger:         #f43f5e;
    --danger-hover:   #e11d48;
    --danger-light:   #fff1f2;
    
    --info:           #06b6d4;
    --info-hover:     #0891b2;
    --info-light:     #ecfeff;

    --purple:         #8b5cf6;
    --purple-light:   #f5f3ff;

    /* Backgrounds & Surfaces */
    --bg-main:        #e5eaf2; /*#e5eaf2. f4f6fa*/
    --bg-surface:     #ffffff; 
    --border-color:   #e2e6f0;
    --border-light:   #eff1f5;

    /* Text Colors */
    --text-main:      #0f172a;
    --text-secondary: #475569;
    --text-muted:     #64748b;
    --text-disabled:  #94a3b8;

    /* Functional Tokens */
    --radius-lg:      16px;
    --radius-md:      12px;
    --radius-sm:      8px;
    --radius-xs:      4px;
    
    /* Elevation / Shadows */
    --shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
    --shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

    /* Typography */
    --font-heading:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body:      'Inter', system-ui, sans-serif;
    
    --fw-regular:     400;
    --fw-medium:      500;
    --fw-semibold:    600;
    --fw-bold:        700;
    --fw-extrabold:   800;

    /* ── DS Alias Bridge ──────────────────────────────────────────────────
       Maps the per-page --ds-* token namespace to the global theme tokens.
       Pages that used --ds-* in their <style> blocks will resolve these
       from a single source of truth once per-page blocks are removed.
    ─────────────────────────────────────────────────────────────────────── */
    --ds-bg:          var(--bg-main);
    --ds-surface:     var(--bg-surface);
    --ds-surface-2:   #f6f7fb;
    --ds-border:      rgba(0, 0, 0, .08);
    --ds-accent:      var(--primary);
    --ds-accent-glow: var(--primary-light);
    --ds-success:     var(--success);
    --ds-warning:     var(--warning);
    --ds-danger:      var(--danger);
    --ds-text:        var(--text-main);
    --ds-muted:       var(--text-muted);
    --ds-radius:      var(--radius-md);
    --ds-radius-sm:   var(--radius-sm);
    --ds-shadow:      var(--shadow-md);

    /* ── DB Alias Bridge ──────────────────────────────────────────────────
       Maps the old private dashboard --db-* token namespace to global
       theme tokens. Used by inline style="" attributes that remain in
       dashboard.blade.php (e.g. --db-border-lt, --db-text, --db-blue).
    ─────────────────────────────────────────────────────────────────────── */
    --db-surface:    var(--bg-surface);
    --db-border:     var(--border-color);
    --db-border-lt:  var(--border-light);
    --db-text:       var(--text-main);
    --db-text-2:     var(--text-secondary);
    --db-text-3:     var(--text-muted);
    --db-blue:       var(--primary);
    --db-blue-lt:    var(--primary-light);
    --db-radius:     var(--radius-md);
    --db-shadow-sm:  var(--shadow-sm);
}