/* ============================================================
   CSoft Theme — Default Brand
   ============================================================
   Primitive palette + semantic tokens for the CSoft blue brand.
   Applied on :root so it acts as the fallback when no
   data-theme attribute is set.
   ============================================================ */

:root, [data-theme="csoft"] {

    /* ── Primitive Palette ────────────────────────────────────
       Raw colour scales. Never used directly in components —
       only referenced by the semantic tokens below.
       ─────────────────────────────────────────────────────── */

    /* Brand Blue */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
    --brand-950: #172554;

    /* Accent Cyan */
    --accent-50:  #ecfeff;
    --accent-100: #cffafe;
    --accent-200: #a5f3fc;
    --accent-300: #67e8f9;
    --accent-400: #22d3ee;
    --accent-500: #06b6d4;
    --accent-600: #0891b2;
    --accent-700: #0e7490;
    --accent-800: #155e75;
    --accent-900: #164e63;

    /* Neutral Gray */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Success Green */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;

    /* Warning Amber */
    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* Danger Red */
    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* Purple (badges only) */
    --purple-100: #f3e8ff;
    --purple-700: #7e22ce;


    /* ── Semantic Tokens ──────────────────────────────────────
       Map primitives to purpose. Components reference these.
       ─────────────────────────────────────────────────────── */

    /* Primary (brand action colour) */
    --color-primary:            var(--brand-600);
    --color-primary-hover:      var(--brand-700);
    --color-primary-active:     var(--brand-800);
    --color-primary-light:      var(--brand-50);
    --color-primary-fg:         #ffffff;

    /* Secondary (outlined / neutral buttons) */
    --color-secondary-bg:       #ffffff;
    --color-secondary-fg:       var(--gray-700);
    --color-secondary-border:   var(--gray-300);
    --color-secondary-hover-bg: var(--gray-50);
    --color-secondary-hover-border: var(--gray-400);
    --color-secondary-hover-fg: var(--gray-900);
    --color-secondary-active-bg: var(--gray-100);

    /* Destructive (danger actions) */
    --color-destructive:        var(--danger-600);
    --color-destructive-hover:  var(--danger-700);
    --color-destructive-active: var(--danger-800);
    --color-destructive-fg:     #ffffff;

    /* Success */
    --color-success:            var(--success-600);
    --color-success-hover:      var(--success-700);
    --color-success-fg:         #ffffff;

    /* Warning */
    --color-warning:            var(--warning-600);
    --color-warning-dark:       var(--warning-700);

    /* Accent */
    --color-accent:             var(--accent-600);
    --color-accent-dark:        var(--accent-700);

    /* Surface & Background */
    --color-background:         #ffffff;
    --color-surface:            #ffffff;
    --color-surface-muted:      var(--gray-50);
    --color-surface-subtle:     var(--gray-100);

    /* Text */
    --color-foreground:         var(--gray-900);
    --color-foreground-muted:   var(--gray-700);
    --color-foreground-dim:     var(--gray-600);
    --color-foreground-subtle:  var(--gray-500);
    --color-foreground-faint:   var(--gray-400);
    --color-foreground-body:    #2c3e50;

    /* Border */
    --color-border:             var(--gray-200);
    --color-border-muted:       var(--gray-100);
    --color-border-input:       var(--gray-300);

    /* Focus Rings */
    --ring-primary:             rgba(37, 99, 235, 0.40);
    --ring-primary-light:       rgba(37, 99, 235, 0.15);
    --ring-secondary:           rgba(107, 114, 128, 0.30);
    --ring-destructive:         rgba(220, 38, 38, 0.40);
    --ring-destructive-light:   rgba(220, 38, 38, 0.15);
    --ring-success:             rgba(22, 163, 74, 0.40);
    --ring-success-light:       rgba(22, 163, 74, 0.15);

    /* Overlay */
    --color-overlay:            rgba(0, 0, 0, 0.5);

    /* Readonly / Disabled */
    --color-readonly-bg:        #e9ecef;
    --color-readonly-fg:        #6c757d;


    /* ── Badge Tokens ─────────────────────────────────────── */

    --badge-primary-bg:   var(--brand-100);
    --badge-primary-fg:   var(--brand-700);
    --badge-success-bg:   var(--success-100);
    --badge-success-fg:   var(--success-700);
    --badge-warning-bg:   var(--warning-100);
    --badge-warning-fg:   var(--warning-700);
    --badge-danger-bg:    var(--danger-100);
    --badge-danger-fg:    var(--danger-700);
    --badge-info-bg:      var(--accent-100);
    --badge-info-fg:      var(--accent-700);
    --badge-gray-bg:      var(--gray-100);
    --badge-gray-fg:      var(--gray-600);
    --badge-purple-bg:    var(--purple-100);
    --badge-purple-fg:    var(--purple-700);


    /* ── Alert Tokens ─────────────────────────────────────── */

    --alert-success-bg:     var(--success-50);
    --alert-success-border: var(--success-200);
    --alert-success-fg:     var(--success-700);
    --alert-warning-bg:     var(--warning-50);
    --alert-warning-border: var(--warning-200);
    --alert-warning-fg:     var(--warning-700);
    --alert-danger-bg:      var(--danger-50);
    --alert-danger-border:  var(--danger-200);
    --alert-danger-fg:      var(--danger-700);
    --alert-info-bg:        var(--brand-50);
    --alert-info-border:    var(--brand-200);
    --alert-info-fg:        var(--brand-700);


    /* ── Stat Card Tokens ─────────────────────────────────── */

    --stat-primary-accent:  var(--brand-600);
    --stat-primary-icon-bg: var(--brand-50);
    --stat-primary-icon-fg: var(--brand-600);
    --stat-success-accent:  var(--success-600);
    --stat-success-icon-bg: var(--success-50);
    --stat-success-icon-fg: var(--success-600);
    --stat-warning-accent:  var(--warning-600);
    --stat-warning-icon-bg: var(--warning-50);
    --stat-warning-icon-fg: var(--warning-600);
    --stat-danger-accent:   var(--danger-600);
    --stat-danger-icon-bg:  var(--danger-50);
    --stat-danger-icon-fg:  var(--danger-600);
    --stat-accent-accent:   var(--accent-600);
    --stat-accent-icon-bg:  var(--accent-50);
    --stat-accent-icon-fg:  var(--accent-600);


    /* ── Navigation / Sidebar Tokens ────────────────────── */

    --nav-bg:              var(--brand-900);
    --nav-bg-hover:        var(--brand-800);
    --nav-bg-active:       var(--brand-600);
    --nav-border:          var(--brand-800);
    --nav-border-subtle:   var(--brand-700);
    --nav-text:            #ffffff;
    --nav-text-muted:      var(--brand-300);
    --nav-text-dim:        var(--brand-200);
    --nav-text-label:      var(--brand-400);
    --nav-accent-bg:       var(--accent-500);
    --nav-accent-fg:       #ffffff;
    --nav-gradient-from:   var(--brand-900);
    --nav-gradient-to:     var(--brand-800);


    /* ── Syncfusion Grid Tokens (moved from cs-grid.css) ── */

    --csg-header-bg:           #e0ecf8;
    --csg-header-color:        #1e3a5f;
    --csg-header-font-size:    0.6875rem;
    --csg-row-bg:              #ffffff;
    --csg-row-alt-bg:          #d6e3f2;
    --csg-row-hover-bg:        #c8d8ea;
    --csg-row-selected-bg:     #93b8e8;
    --csg-row-selected-color:  #1a3660;
    --csg-row-selected-border: var(--color-primary);
    --csg-cell-color:          #2c3e50;
    --csg-cell-font-size:      0.6875rem;
    --csg-cell-height:         26px;
    --csg-cell-padding:        0px 6px;
    --csg-border-color:        #cdd8e6;
    --csg-toolbar-bg:          #f4f8fc;
    --csg-toolbar-height:      32px;
    --csg-pager-active-bg:     var(--color-primary);
    --csg-pager-active-color:  #ffffff;
}


/* ── Dark Mode ────────────────────────────────────────────────
   Activated by adding class="dark" on <html>.
   Example: <html lang="en" data-theme="csoft" class="dark">
   ──────────────────────────────────────────────────────────── */

:root.dark, [data-theme="csoft"].dark {

    /* Primitive overrides */
    --gray-50:  #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    --gray-950: #ffffff;

    /* Semantic overrides for dark surfaces */
    --color-background:         #0f172a;
    --color-surface:            #1e293b;
    --color-surface-muted:      #1e293b;
    --color-surface-subtle:     #334155;

    --color-foreground:         #f1f5f9;
    --color-foreground-muted:   #e2e8f0;
    --color-foreground-dim:     #cbd5e1;
    --color-foreground-subtle:  #94a3b8;
    --color-foreground-faint:   #64748b;
    --color-foreground-body:    #cbd5e1;

    --color-border:             #334155;
    --color-border-muted:       #1e293b;
    --color-border-input:       #475569;

    --color-primary-fg:         #ffffff;
    --color-secondary-bg:       #1e293b;
    --color-secondary-fg:       #e2e8f0;
    --color-secondary-border:   #475569;
    --color-secondary-hover-bg: #334155;
    --color-secondary-hover-border: #64748b;
    --color-secondary-hover-fg: #f1f5f9;
    --color-secondary-active-bg: #475569;

    --color-overlay:            rgba(0, 0, 0, 0.7);
    --color-readonly-bg:        #1e293b;
    --color-readonly-fg:        #94a3b8;

    /* Badge dark adjustments — softer backgrounds */
    --badge-primary-bg:   rgba(37, 99, 235, 0.20);
    --badge-primary-fg:   #93c5fd;
    --badge-success-bg:   rgba(22, 163, 74, 0.20);
    --badge-success-fg:   #86efac;
    --badge-warning-bg:   rgba(217, 119, 6, 0.20);
    --badge-warning-fg:   #fcd34d;
    --badge-danger-bg:    rgba(220, 38, 38, 0.20);
    --badge-danger-fg:    #fca5a5;
    --badge-info-bg:      rgba(8, 145, 178, 0.20);
    --badge-info-fg:      #67e8f9;
    --badge-gray-bg:      rgba(107, 114, 128, 0.20);
    --badge-gray-fg:      #d1d5db;
    --badge-purple-bg:    rgba(126, 34, 206, 0.20);
    --badge-purple-fg:    #d8b4fe;

    /* Alert dark adjustments */
    --alert-success-bg:     rgba(22, 163, 74, 0.10);
    --alert-success-border: rgba(22, 163, 74, 0.30);
    --alert-success-fg:     #86efac;
    --alert-warning-bg:     rgba(217, 119, 6, 0.10);
    --alert-warning-border: rgba(217, 119, 6, 0.30);
    --alert-warning-fg:     #fcd34d;
    --alert-danger-bg:      rgba(220, 38, 38, 0.10);
    --alert-danger-border:  rgba(220, 38, 38, 0.30);
    --alert-danger-fg:      #fca5a5;
    --alert-info-bg:        rgba(37, 99, 235, 0.10);
    --alert-info-border:    rgba(37, 99, 235, 0.30);
    --alert-info-fg:        #93c5fd;

    /* Stat card dark adjustments */
    --stat-primary-icon-bg: rgba(37, 99, 235, 0.15);
    --stat-success-icon-bg: rgba(22, 163, 74, 0.15);
    --stat-warning-icon-bg: rgba(217, 119, 6, 0.15);
    --stat-danger-icon-bg:  rgba(220, 38, 38, 0.15);
    --stat-accent-icon-bg:  rgba(8, 145, 178, 0.15);

    /* Syncfusion Grid dark */
    --csg-header-bg:           #1e293b;
    --csg-header-color:        #e2e8f0;
    --csg-row-bg:              #0f172a;
    --csg-row-alt-bg:          #1e293b;
    --csg-row-hover-bg:        #334155;
    --csg-row-selected-bg:     rgba(37, 99, 235, 0.25);
    --csg-row-selected-color:  #f1f5f9;
    --csg-cell-color:          #cbd5e1;
    --csg-border-color:        #334155;
    --csg-toolbar-bg:          #1e293b;
    --csg-pager-active-color:  #ffffff;
}