/* === Dark theme (default) === */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-base:            #0F1115;
    --bg-surface-1:       #161A22;
    --bg-surface-2:       #1D2230;
    --bg-surface-3:       #232940;

    --border-subtle:      #252B3A;
    --border-strong:      #323A4E;

    --text-primary:       #E7EAF1;
    --text-secondary:     #9AA3B8;
    --text-muted:         #6B7388;
    --text-on-accent:     #FFFFFF;

    --accent:             #1D7A45;
    --accent-hover:       #166135;
    --accent-subtle:      rgba(29, 122, 69, 0.15);
    --accent-focus:       rgba(29, 122, 69, 0.35);
    --accent-border:      rgba(29, 122, 69, 0.3);

    --success:            #22C55E;
    --success-subtle:     rgba(34, 197, 94, 0.12);
    --success-text:       #4ADE80;
    --success-border:     rgba(34, 197, 94, 0.25);

    --warning:            #F59E0B;
    --warning-subtle:     rgba(245, 158, 11, 0.12);
    --warning-text:       #FBBF24;
    --warning-border:     rgba(245, 158, 11, 0.3);

    --danger:             #EF4444;
    --danger-subtle:      rgba(239, 68, 68, 0.12);
    --danger-text:        #F87171;
    --danger-border:      rgba(239, 68, 68, 0.25);

    --info:               #0EA5E9;
    --info-subtle:        rgba(14, 165, 233, 0.12);
    --info-text:          #38BDF8;
    --info-border:        rgba(14, 165, 233, 0.25);

    --status-online:      #22C55E;
    --status-offline:     #6B7388;
    --status-warning:     #F59E0B;

    --color-danger:       var(--danger);
    --color-primary:      var(--accent);
    --color-warning-bg:   var(--warning-subtle);
    --color-warning-text: var(--warning-text);
    --color-warning:      var(--warning);

    --bg-surface:         var(--bg-surface-1);
    --bg-elevated:        var(--bg-surface-2);
    --surface-hover:      rgba(255, 255, 255, 0.04);
    --surface-raised:     var(--bg-surface-2);

    --overlay-backdrop:   rgba(0, 0, 0, 0.55);
    --media-viewer-bg:    #050608;
    --media-chrome-bg:    rgba(0, 0, 0, 0.9);
    --popover-shadow:     0 12px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.12);

    --chart-productive:   #1d7a45;
    --chart-unproductive: #f43f5e;
    --chart-neutral:      #94a3b8;
    --chart-online:       #22c55e;
    --chart-offline:      #9ca3af;
    --chart-active:       #0ea5e9;
    --chart-other:        #3a4256;
    --chart-ring-blue:    #0EA5E9;
    --chart-ring-purple:  #A855F7;
    --chart-ring-orange:  #F97316;
    --chart-ring-teal:    #14B8A6;
    --chart-ring-rose:    #F43F5E;

    --pill-productive-text:   #4ADE80;
    --pill-productive-bg:     rgba(34, 197, 94, 0.14);
    --pill-unproductive-text: #F87171;
    --pill-unproductive-bg:   rgba(239, 68, 68, 0.12);
    --pill-neutral-text:      var(--text-muted);
    --pill-neutral-bg:        rgba(107, 115, 136, 0.12);
    --pill-unset-text:        #38BDF8;
    --pill-unset-bg:          rgba(37, 99, 235, 0.12);

    --badge-purple-text:  #C4B5FD;
    --badge-purple-bg:    rgba(124, 58, 237, 0.1);
    --badge-cyan-text:    #7DD3FC;
    --badge-cyan-bg:      rgba(3, 105, 161, 0.1);

    --focus-ring-primary: rgba(99, 102, 241, 0.15);
    --checker-line:       rgba(0, 0, 0, 0.07);

    --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.40);
}

/* === Light theme === */
[data-theme="light"] {
    color-scheme: light;

    --bg-base:            #F4F6F9;
    --bg-surface-1:       #FFFFFF;
    --bg-surface-2:       #F1F4F8;
    --bg-surface-3:       #E8ECF2;

    --border-subtle:      #E2E8F0;
    --border-strong:      #CBD5E1;

    --text-primary:       #0F172A;
    --text-secondary:     #475569;
    --text-muted:         #94A3B8;
    --text-on-accent:     #FFFFFF;

    --accent:             #1D7A45;
    --accent-hover:       #166135;
    --accent-subtle:      rgba(29, 122, 69, 0.10);
    --accent-focus:       rgba(29, 122, 69, 0.28);
    --accent-border:      rgba(29, 122, 69, 0.25);

    --success:            #16A34A;
    --success-subtle:     rgba(22, 163, 74, 0.10);
    --success-text:       #15803D;
    --success-border:     rgba(22, 163, 74, 0.25);

    --warning:            #D97706;
    --warning-subtle:     rgba(234, 179, 8, 0.12);
    --warning-text:       #B45309;
    --warning-border:     rgba(234, 179, 8, 0.30);

    --danger:             #DC2626;
    --danger-subtle:      rgba(239, 68, 68, 0.10);
    --danger-text:        #B91C1C;
    --danger-border:      rgba(239, 68, 68, 0.25);

    --info:               #0284C7;
    --info-subtle:        rgba(14, 165, 233, 0.10);
    --info-text:          #0369A1;
    --info-border:        rgba(14, 165, 233, 0.22);

    --status-online:      #16A34A;
    --status-offline:     #94A3B8;
    --status-warning:     #D97706;

    --surface-hover:      rgba(15, 23, 42, 0.04);
    --surface-raised:     #FFFFFF;

    --overlay-backdrop:   rgba(15, 23, 42, 0.45);
    --media-viewer-bg:    #1E293B;
    --media-chrome-bg:    rgba(15, 23, 42, 0.88);
    --popover-shadow:     0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);

    --chart-other:        #E2E8F0;

    --pill-productive-text:   #15803D;
    --pill-productive-bg:     rgba(22, 163, 74, 0.12);
    --pill-unproductive-text: #B91C1C;
    --pill-unproductive-bg:   rgba(220, 38, 38, 0.10);
    --pill-neutral-text:      #64748B;
    --pill-neutral-bg:        rgba(100, 116, 139, 0.10);
    --pill-unset-text:        #2563EB;
    --pill-unset-bg:          rgba(37, 99, 235, 0.10);

    --badge-purple-text:  #7C3AED;
    --badge-purple-bg:    rgba(124, 58, 237, 0.08);
    --badge-cyan-text:    #0369A1;
    --badge-cyan-bg:      rgba(3, 105, 161, 0.08);

    --focus-ring-primary: rgba(29, 122, 69, 0.18);
    --checker-line:       rgba(15, 23, 42, 0.06);

    --shadow-xs:  0 1px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.10);
    --shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.12);
}

/* === Typography === */
:root {
    --font-sans:   "Montserrat", system-ui, -apple-system, sans-serif;
    --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-xs:    11px;
    --text-sm:    12px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   24px;

    --leading:    1.5;
    --tracking-tight: -0.01em;
}

/* === Spacing === */
:root {
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
}

/* === Border Radius (MAX 4px per spec) === */
:root {
    --radius-sm:  2px;
    --radius-md:  3px;
    --radius-lg:  4px;
}

/* === Motion === */
:root {
    --ease-out:       cubic-bezier(0.2, 0.6, 0.3, 1);
    --duration-fast:  100ms;
    --duration-base:  150ms;
    --duration-slow:  250ms;
}

/* === Z-Index === */
:root {
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}