/* ============================================================
   MoSys Design Tokens — Light Mode (default)
   ============================================================ */
:root,
[data-theme="light"] {

    /* --- Primitive Colors ----------------------------------- */
    --color-slate-50:   #F8FAFC;
    --color-slate-100:  #F1F5F9;
    --color-slate-200:  #E2E8F0;
    --color-slate-300:  #CBD5E1;
    --color-slate-400:  #94A3B8;
    --color-slate-500:  #64748B;
    --color-slate-600:  #475569;
    --color-slate-700:  #334155;
    --color-slate-800:  #1E293B;
    --color-slate-900:  #0F172A;
    --color-slate-950:  #020617;

    /* UNIPLANT Brand Blues */
    --color-blue-50:    #EBF2FF;
    --color-blue-100:   #D6E4FF;
    --color-blue-200:   #96D4FF;  /* Ice Blue */
    --color-blue-300:   #86C2FF;  /* Sky Blue */
    --color-blue-400:   #5786FB;  /* Bright Blue */
    --color-blue-500:   #325DE8;  /* Mid Blue */
    --color-blue-600:   #103AB3;  /* Deep Blue */
    --color-blue-700:   #001A71;  /* Navy Primary */
    --color-blue-800:   #001560;
    --color-blue-900:   #001050;
    --color-blue-950:   #000B3A;

    --color-green-500:  #22C55E;
    --color-green-600:  #16A34A;
    --color-green-700:  #15803D;
    --color-amber-500:  #F59E0B;
    --color-amber-600:  #D97706;
    --color-amber-700:  #B45309;
    --color-red-500:    #EF4444;
    --color-red-600:    #DC2626;
    --color-red-700:    #B91C1C;
    --color-purple-500: #A855F7;
    --color-purple-700: #7E22CE;
    --color-cyan-500:   #06B6D4;

    /* --- Semantic: Background ------------------------------- */
    --color-bg-primary:    #FFFFFF;
    --color-bg-secondary:  #F8FAFC;
    --color-bg-tertiary:   #F1F5F9;
    --color-bg-surface:    #FFFFFF;
    --color-bg-elevated:   #FFFFFF;
    --color-bg-sidebar:    #000C3D;  /* Darker Navy — sidebar */
    --color-bg-inverse:    #000C3D;

    /* --- Semantic: Text ------------------------------------- */
    --color-text-primary:    #0F172A;
    --color-text-secondary:  #334155;
    --color-text-muted:      #64748B;
    --color-text-inverse:    #F8FAFC;
    --color-text-link:       #103AB3;  /* UNIPLANT Deep Blue */
    --color-text-on-primary: #FFFFFF;

    /* --- Semantic: Border ----------------------------------- */
    --color-border-default:  #E2E8F0;
    --color-border-subtle:   #F1F5F9;
    --color-border-strong:   #CBD5E1;
    --color-border-focus:    #103AB3;  /* UNIPLANT Deep Blue */

    /* --- Semantic: Icon ------------------------------------- */
    --color-icon-primary:    #334155;
    --color-icon-secondary:  #64748B;
    --color-icon-muted:      #94A3B8;

    /* --- Brand / Primary (UNIPLANT) ------------------------- */
    --color-primary:         #103AB3;  /* Deep Blue */
    --color-primary-hover:   #325DE8;  /* Mid Blue */
    --color-primary-active:  #001A71;  /* Navy Primary */
    --color-primary-light:   #D6E4FF;
    --color-primary-muted:   #5786FB;  /* Bright Blue */
    --color-primary-bg-subtle: rgba(16, 58, 179, 0.10);
    --color-primary-bg-faint:  rgba(16, 58, 179, 0.06);

    /* --- UNIPLANT Brand Gradient ---------------------------- */
    --brand-navy:        #001A71;
    --brand-deep-blue:   #103AB3;
    --brand-mid-blue:    #325DE8;
    --brand-bright-blue: #5786FB;
    --brand-sky-blue:    #86C2FF;
    --brand-ice-blue:    #96D4FF;
    --brand-gradient:    linear-gradient(135deg, #001A71 0%, #103AB3 20%, #325DE8 40%, #5786FB 60%, #86C2FF 80%, #96D4FF 100%);

    /* --- Status --------------------------------------------- */
    --color-success-bg:      #F0FDF4;
    --color-success-border:  #BBF7D0;
    --color-success-text:    #15803D;
    --color-success-icon:    #22C55E;

    --color-warning-bg:      #FFFBEB;
    --color-warning-border:  #FDE68A;
    --color-warning-text:    #B45309;
    --color-warning-icon:    #F59E0B;

    --color-error-bg:        #FEF2F2;
    --color-error-border:    #FECACA;
    --color-error-text:      #B91C1C;
    --color-error-icon:      #EF4444;

    --color-info-bg:         #EBF2FF;
    --color-info-border:     #96D4FF;
    --color-info-text:       #001A71;
    --color-info-icon:       #325DE8;

    --color-critical-bg:     #FEF2F2;
    --color-critical-border: #EF4444;
    --color-critical-text:   #FFFFFF;
    --color-critical-icon:   #EF4444;

    --color-maintenance-bg:     #FAF5FF;
    --color-maintenance-border: #E9D5FF;
    --color-maintenance-text:   #7E22CE;
    --color-maintenance-icon:   #A855F7;

    /* --- Device Status -------------------------------------- */
    --color-device-online:      #22C55E;
    --color-device-offline:     #EF4444;
    --color-device-degraded:    #F59E0B;
    --color-device-unreachable: #94A3B8;
    --color-device-maintenance: #A855F7;

    /* --- Severity ------------------------------------------- */
    --color-severity-critical:  #EF4444;
    --color-severity-major:     #F97316;
    --color-severity-minor:     #F59E0B;
    --color-severity-warning:   #FBBF24;
    --color-severity-info:      #325DE8;
    --color-severity-cleared:   #22C55E;

    /* --- Chart Palette -------------------------------------- */
    --color-chart-1: #325DE8;
    --color-chart-2: #22C55E;
    --color-chart-3: #F59E0B;
    --color-chart-4: #EF4444;
    --color-chart-5: #A855F7;
    --color-chart-6: #06B6D4;
    --color-chart-7: #F97316;
    --color-chart-8: #EC4899;
    --color-chart-grid:         #E2E8F0;
    --color-chart-axis:         #94A3B8;
    --color-chart-tooltip-bg:   #0F172A;
    --color-chart-tooltip-text: #F8FAFC;

    /* --- Typography (UNIPLANT: Manrope + Consolas) ----------- */
    --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Consolas', 'Fira Code', 'JetBrains Mono', monospace;
    --font-display: 'Manrope', sans-serif;

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --text-2xs:  11px;
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  28px;
    --text-4xl:  32px;
    --text-5xl:  40px;

    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* KPI / Metric typography */
    --text-kpi-large:  36px;
    --text-kpi-medium: 28px;
    --text-kpi-small:  20px;
    --text-kpi-label:  12px;

    /* --- Spacing (4px grid) --------------------------------- */
    --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;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;

    /* --- Elevation / Shadows -------------------------------- */
    --shadow-none: none;
    --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow-blue:    0 0 12px rgba(50, 93, 232, 0.18);
    --shadow-glow-success: 0 0 8px rgba(34, 197, 94, 0.4);
    --shadow-glow-error:   0 0 8px rgba(239, 68, 68, 0.4);
    --shadow-glow-warning: 0 0 8px rgba(245, 158, 11, 0.4);

    /* --- Border Radius -------------------------------------- */
    --radius-none: 0;
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* --- Motion --------------------------------------------- */
    --duration-instant:  50ms;
    --duration-fast:     100ms;
    --duration-normal:   150ms;
    --duration-moderate: 200ms;
    --duration-slow:     300ms;
    --duration-slower:   500ms;

    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Layout --------------------------------------------- */
    --sidebar-width:           256px;
    --sidebar-width-collapsed: 64px;
    --topbar-height:           56px;
    --content-max-width:       1440px;
    --content-padding:         24px;
    --content-padding-mobile:  16px;
    --grid-columns:            12;
    --grid-gap:                16px;
    --grid-gap-sm:             12px;

    /* --- Overlay / Mask ------------------------------------- */
    --color-overlay-mask:     rgba(15, 23, 42, 0.38);

    /* --- Sidebar (always dark navy bg) ---------------------- */
    --sidebar-border:         rgba(255, 255, 255, 0.06);
    --sidebar-text:           rgba(255, 255, 255, 0.60);
    --sidebar-text-label:     rgba(255, 255, 255, 0.35);
    --sidebar-text-dim:       rgba(255, 255, 255, 0.40);
    --sidebar-text-hover:     rgba(255, 255, 255, 0.85);
    --sidebar-text-hover-dim: rgba(255, 255, 255, 0.70);
    --sidebar-hover:          rgba(255, 255, 255, 0.06);
    --sidebar-hover-medium:   rgba(255, 255, 255, 0.08);
    --sidebar-hover-strong:   rgba(255, 255, 255, 0.10);
    --sidebar-active:         rgba(87, 134, 251, 0.15);
    --sidebar-badge-error:    rgba(239, 68, 68, 0.15);
    --sidebar-badge-warning:  rgba(245, 158, 11, 0.15);

    /* --- Primary Shadows ------------------------------------ */
    --shadow-primary-button:       0 8px 18px rgba(16, 58, 179, 0.22);
    --shadow-primary-button-hover: 0 4px 12px rgba(16, 58, 179, 0.30);

    /* --- Form Inputs ---------------------------------------- */
    --input-height:              36px;
    --input-font-size:           12px;
    --input-padding-x:           10px;
    --form-field-height:         36px;
    --form-field-padding-top:    16px;
    --form-field-padding-bottom: 4px;

    /* --- Z-Index Scale -------------------------------------- */
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-fixed:     30;
    --z-overlay:   40;
    --z-modal:     50;
    --z-popover:   60;
    --z-tooltip:   70;
    --z-toast:     80;
}

/* ============================================================
   Dark Mode
   ============================================================ */
[data-theme="dark"] {

    /* --- Semantic: Background ------------------------------- */
    --color-bg-primary:    #020617;
    --color-bg-secondary:  #0F172A;
    --color-bg-tertiary:   #1E293B;
    --color-bg-surface:    #1E293B;
    --color-bg-elevated:   #334155;
    --color-bg-sidebar:    #020617;
    --color-bg-inverse:    #F8FAFC;

    /* --- Semantic: Text ------------------------------------- */
    --color-text-primary:    #F8FAFC;
    --color-text-secondary:  #CBD5E1;
    --color-text-muted:      #94A3B8;
    --color-text-inverse:    #0F172A;
    --color-text-link:       #5786FB;  /* UNIPLANT Bright Blue */
    --color-text-on-primary: #FFFFFF;

    /* --- Semantic: Border ----------------------------------- */
    --color-border-default:  #334155;
    --color-border-subtle:   #1E293B;
    --color-border-strong:   #475569;
    --color-border-focus:    #5786FB;  /* UNIPLANT Bright Blue */

    /* --- Semantic: Icon ------------------------------------- */
    --color-icon-primary:    #CBD5E1;
    --color-icon-secondary:  #94A3B8;
    --color-icon-muted:      #64748B;

    /* --- Brand / Primary (UNIPLANT dark) -------------------- */
    --color-primary:         #5786FB;  /* Bright Blue */
    --color-primary-hover:   #86C2FF;  /* Sky Blue */
    --color-primary-active:  #325DE8;  /* Mid Blue */
    --color-primary-light:   #001050;
    --color-primary-muted:   #103AB3;  /* Deep Blue */
    --color-primary-bg-subtle: rgba(87, 134, 251, 0.12);
    --color-primary-bg-faint:  rgba(87, 134, 251, 0.08);

    /* --- Status --------------------------------------------- */
    --color-success-bg:      #052E16;
    --color-success-border:  #166534;
    --color-success-text:    #86EFAC;
    --color-success-icon:    #4ADE80;

    --color-warning-bg:      #451A03;
    --color-warning-border:  #92400E;
    --color-warning-text:    #FCD34D;
    --color-warning-icon:    #FBBF24;

    --color-error-bg:        #450A0A;
    --color-error-border:    #991B1B;
    --color-error-text:      #FCA5A5;
    --color-error-icon:      #F87171;

    --color-info-bg:         #000B3A;
    --color-info-border:     #103AB3;
    --color-info-text:       #86C2FF;
    --color-info-icon:       #5786FB;

    --color-critical-bg:     #7F1D1D;
    --color-critical-border: #EF4444;
    --color-critical-text:   #FFFFFF;
    --color-critical-icon:   #F87171;

    --color-maintenance-bg:     #3B0764;
    --color-maintenance-border: #6B21A8;
    --color-maintenance-text:   #D8B4FE;
    --color-maintenance-icon:   #C084FC;

    /* --- Device Status -------------------------------------- */
    --color-device-online:      #4ADE80;
    --color-device-offline:     #F87171;
    --color-device-degraded:    #FBBF24;
    --color-device-unreachable: #64748B;
    --color-device-maintenance: #C084FC;

    /* --- Chart Palette -------------------------------------- */
    --color-chart-1: #5786FB;
    --color-chart-2: #4ADE80;
    --color-chart-3: #FBBF24;
    --color-chart-4: #F87171;
    --color-chart-5: #C084FC;
    --color-chart-6: #22D3EE;
    --color-chart-7: #FB923C;
    --color-chart-8: #F472B6;
    --color-chart-grid:         #334155;
    --color-chart-axis:         #64748B;
    --color-chart-tooltip-bg:   #1E293B;
    --color-chart-tooltip-text: #F8FAFC;

    /* --- Elevation / Shadows (darker) ----------------------- */
    --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow-blue: 0 0 12px rgba(87, 134, 251, 0.3);
}

/* ============================================================
   Accessibility: Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root,
    [data-theme="light"],
    [data-theme="dark"] {
        --duration-instant:  0ms;
        --duration-fast:     0ms;
        --duration-normal:   0ms;
        --duration-moderate: 0ms;
        --duration-slow:     0ms;
        --duration-slower:   0ms;
        --transition-fast:   0ms;
        --transition-normal: 0ms;
        --transition-slow:   0ms;
    }
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: background var(--transition-slow), color var(--transition-slow);
}

/* body flex/overflow moved to mosys-layout.css */

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }