:root {
    /* === DINAS PU BINA MARGA INSTITUTIONAL PALETTE === */

    /* Primary Brand - PU Blue */
    --pu-blue-dark: #003087;
    /* Header/Sidebar deep navy */
    --pu-blue: #0047BB;
    /* Primary brand blue */
    --pu-blue-mid: #0D5EAF;
    /* Medium brand blue */
    --pu-blue-light: #1976D2;
    /* Lighter interactive blue */
    --pu-blue-accent: #2196F3;
    /* Accent / hover blue */
    --pu-sky: #E3F2FD;
    /* Very light blue tint for backgrounds */
    --pu-sky-mid: #BBDEFB;
    /* Light blue for row hover / borders */

    /* Gold Accent (like PU logo trim) */
    --pu-gold: #F5A623;
    --pu-gold-light: #FFC947;

    /* Backgrounds */
    --bg-main: #F0F4FA;
    /* Light grey-blue page background */
    --bg-card: #FFFFFF;
    /* Pure white cards */
    --bg-card-hover: #F5F8FF;
    /* Subtle blue tint on hover */
    --bg-input: #F7F9FC;
    /* Input background */
    --bg-sidebar: #003087;
    /* Deep navy sidebar */
    --bg-topbar: #FFFFFF;
    /* White topbar */

    /* Text Colors */
    --text-main: #1A2340;
    /* Very dark navy for body text */
    --text-secondary: #4B5E82;
    /* Muted navy-grey */
    --text-muted: #8EA0BA;
    /* Placeholder / disabled text */
    --text-on-dark: #FFFFFF;
    /* White for text on dark/blue bg */
    --text-on-dark-muted: rgba(255, 255, 255, 0.65);

    /* Status Colors */
    --danger: #D32F2F;
    --warning: #F57C00;
    --success: #2E7D32;
    --info: #0277BD;

    /* Glows / Elevation Shadows */
    --glow-blue: 0 4px 20px rgba(0, 71, 187, 0.25);
    --glow-cyan: 0 4px 20px rgba(33, 150, 243, 0.3);
    --glow-danger: 0 4px 15px rgba(211, 47, 47, 0.25);
    --glow-success: 0 4px 15px rgba(46, 125, 50, 0.25);
    --shadow-card: 0 2px 12px rgba(0, 48, 135, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-card-lg: 0 8px 32px rgba(0, 48, 135, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 10px 40px rgba(0, 48, 135, 0.18);
    --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.18);

    /* Borders */
    --border-subtle: rgba(0, 48, 135, 0.07);
    --border-glass: rgba(0, 71, 187, 0.12);
    --border-neon-cyan: 1px solid var(--pu-blue-accent);
    --border-neon-blue: 1px solid var(--pu-blue);

    /* Neon vars pointing to PU blues (legacy compat) */
    --neon-cyan: var(--pu-blue-accent);
    --neon-blue: var(--pu-blue-light);
    --neon-purple: var(--pu-blue-mid);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}