:root {
    /* Navy-tinted neutrals — institutional, not cold */
    --x-gray-950: #0c1222;
    --x-gray-900: #1a2332;
    --x-gray-800: #2e3a4a;
    --x-gray-700: #455468;
    --x-gray-600: #5f7085;
    --x-gray-500: #8b99ad;
    --x-gray-400: #c1c9d6;
    --x-gray-300: #dce1e9;
    --x-gray-200: #eef1f5;
    --x-gray-100: #f6f7fa;
    --x-white: #fefefe;

    /* Steel-blue accent — restrained, institutional */
    --x-accent: #4b6fa0;
    --x-accent-hover: #3d5e8a;
    --x-accent-subtle: #edf2f8;

    /* Semantic — used only for meaning */
    --x-success: #2d7a4f;
    --x-success-subtle: #eef7f1;
    --x-warning: #b5700a;
    --x-warning-subtle: #fdf5e9;
    --x-danger: #c53030;
    --x-danger-subtle: #fdf0f0;

    /* Legacy alias (Bootstrap overrides reference this) */
    --x-info: var(--x-accent);
    --x-info-subtle: var(--x-accent-subtle);

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

    /* Border radius */
    --x-radius-sm: 4px;
    --x-radius-md: 6px;
    --x-radius-lg: 8px;

    /* Borders */
    --x-border: 1px solid var(--x-gray-300);

    /* Shadows — navy-tinted, subtle */
    --x-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.05);
    --x-shadow-md: 0 2px 8px rgba(12, 18, 34, 0.07);
    --x-shadow-lg: 0 6px 20px rgba(12, 18, 34, 0.09);

    /* Type scale */
    --x-text-xs: 0.6875rem;
    --x-text-sm: 0.8125rem;
    --x-text-base: 0.875rem;
    --x-text-lg: 1rem;
    --x-text-xl: 1.25rem;
    --x-text-2xl: 1.5rem;

    /* Sidebar */
    --x-sidebar-width: 232px;
    --x-sidebar-collapsed: 0px;
    --x-topbar-height: 52px;

    /* Motion */
    --x-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --x-duration-fast: 120ms;
    --x-duration-base: 200ms;
    --x-duration-slow: 320ms;
}