/* =========================================================
   LAADIX DESIGN SYSTEM
   Professional Healthcare Theme
   ========================================================= */

:root {
    /* ---- Brand Colors ---- */
    --navy-950: #050d1c;
    --navy-900: #0a1830;
    --navy-800: #0f2244;
    --navy-700: #16305c;
    --navy-600: #1e4079;

    --royal-600: #2451e8;
    --royal-500: #3866f2;
    --royal-400: #5c81f5;
    --royal-100: #e8edfe;
    --royal-50:  #f3f6fe;

    --white: #ffffff;
    --gray-50:  #f7f8fa;
    --gray-100: #eef0f4;
    --gray-200: #dfe3ea;
    --gray-300: #c3c9d4;
    --gray-400: #9aa2b1;
    --gray-500: #6b7385;
    --gray-600: #4b5263;
    --gray-700: #333a4b;
    --gray-800: #1f2432;

    /* ---- Semantic ---- */
    --success: #12946b;
    --success-bg: #e6f7f0;
    --warning: #b8791b;
    --warning-bg: #fdf3e2;
    --danger: #d9432f;
    --danger-bg: #fbe9e6;
    --info: var(--royal-600);
    --info-bg: var(--royal-50);

    /* ---- Surfaces ---- */
    --bg-app: var(--gray-50);
    --bg-surface: var(--white);
    --border-color: var(--gray-200);
    --text-primary: var(--navy-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --text-inverse: var(--white);

    /* ---- Typography ---- */
    --font-display: 'Sora', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;

    /* ---- Spacing scale ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 2px rgba(10, 24, 48, 0.06);
    --shadow-md: 0 4px 16px rgba(10, 24, 48, 0.08);
    --shadow-lg: 0 12px 32px rgba(10, 24, 48, 0.12);
    --shadow-navy: 0 20px 40px rgba(5, 13, 28, 0.35);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 450ms;

    /* ---- Layout ---- */
    --sidebar-width: 264px;
    --header-height: 72px;
    --container-max: 1280px;
}

@media (prefers-color-scheme: dark) {
    /* Reserved for future dark-mode toggle — not active by default */
}