:root {
    --White: #ffffff;
    --Black: #000000;
    --Slate900: #0f172a;
    --Slate800: #1e293b;
    --Slate600: #475569;
    --Slate500: #64748b;
    --Slate300: #cbd5e1;
    --Slate200: #e2e8f0;
    --Slate100: #f1f5f9;
    --Slate50: #f8fafc;
    --Gray200: #e5e7eb;
    --Gray100: #f3f4f6;
    --Gray50: #f9fafb;
    --Gray300: #d1d5db;
    --Gray400: #9ca3af;
    --Blue600: #2563eb;
    --Blue700: #1d4ed8;
    --Blue500: #3b82f6;
    --Blue200: #bfdbfe;
    --Blue300: #93c5fd;
    --Blue800: #1e40af;
    --Green500: #22c55e;
    --Green800: #166534;
    --Green100: #dcfce7;
    --Green200: #bbf7d0;
    --Green300: #86efac;
    --Red600: #dc2626;
    --Red700: #b91c1c;
    --Red800: #991b1b;
    --Red100: #fee2e2;
    --Red400: #f87171;
    --Red500: #ef4444;
    --Orange400: #fb923c;
    --Orange50: #fff7ed;
    --Amber500: #f59e0b;
    --Yellow800: #854d0e;
    --Yellow200: #fef08a;
    --Pink200: #fbcfe8;
    --Pink800: #9d174d;
    --Indigo50: #eef2ff;
    --Emerald50: #ecfdf5;
    --PlateBlue: #003399;
    --PlateYellow: #ffd600;
    --DockOccupied: #e74c3c;
    --DockAvailable: #2ecc71;
    --RadiusSmall: 8px;
    --RadiusMedium: 12px;
    --RadiusLarge: 16px;
    --RadiusPill: 999px;
}
:root {
    --BackgroundColor: #f6f7f9;
    --CardBackground: var(--White);
    --SecondaryBackground: var(--Gray100);
    --PrimaryColor: var(--Slate900);
    --AccentColor: var(--Blue600);
    --DangerColor: var(--Red600);
    --DangerAccentColor: #c92727;
    --MutedText: var(--Slate500);
    --BorderColor: var(--Gray200);
    --InputBackground: var(--Gray50);
    --CompleteColor: var(--Green500);
    --IncompleteColor: #fbbf24;
    --ShadowSoft: 0 10px 30px rgba(0, 0, 0, 0.06);
}
:root[data-page="overview"] {
    --PrimaryColor: var(--Slate800);
    --MutedText: var(--Slate500);
    --BorderColor: var(--Slate200);
    --InputBackground: var(--Slate50);

    --SuccessColor: var(--Green500);
    --WarningColor: var(--Amber500);
    --InfoColor: var(--Blue500);
    --DangerColor: var(--Red500);

    /* UI helpers */
    --BrandBlue: var(--Blue600);
    --BrandBlueHover: var(--Blue700);
    --BrandBlueBorder: rgba(37, 99, 235, 0.35);

    --ShadowHover: 0 4px 14px rgba(0, 0, 0, 0.06);
    --ShadowSelected: 0 6px 18px rgba(0, 0, 0, 0.08);

    --RadiusSm: 10px;
    --RadiusMd: 12px;
    --RadiusLg: 14px;

    --TransitionFast: 0.15s ease;
    --TransitionMed: 0.2s ease;
}
/* Deliberate page variants: preserve existing dimensions and header treatments. */
:root[data-page="users"] {
    --WideCardMaxWidth: 1000px;
    --DashboardHeaderMargin: 30px;
}
:root[data-page="hubs"], :root[data-page="hardware"] {
    --WideCardMaxWidth: 900px;
}
:root[data-page="loadinglist"] {
    --WideCardMaxWidth: 1100px;
}
:root[data-page="hw_setup"], :root[data-page="edit_user"], :root[data-page="pics"] {
    --WideCardMaxWidth: 1200px;
    --WideCardPadding: 24px 32px 32px;
}
:root[data-page="dev_dashboard"] {
    --DashboardHeaderAlign: flex-start;
    --DashboardHeaderMargin: 40px;
}
:root[data-page="edit_user"] {
    --StatusFontSize: 12px;
    --StatusPadding: 4px 12px;
    --StatusRadius: 20px;
    --StatusTransform: none;
}