:root {
    /* Brand Colors - High-End Medical & Clinical Palette */
    --color-brand-primary: #0f3d38;       /* Deep Mediterranean Teal */
    --color-brand-primary-dark: #0a2926;  /* Obsidian Teal */
    --color-brand-primary-light: #165b54; /* Forest Teal */
    --color-brand-accent: #0284c7;        /* Medical Azure */
    --color-brand-accent-hover: #0369a1;  /* Deep Azure */
    --color-brand-emerald: #059669;       /* Clinical Green */
    --color-brand-gold: #d97706;          /* Warm Amber Accent */

    /* Surface & Background Neutrals (Warm, Natural, Clinical) */
    --color-bg-canvas: #f8fafc;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #f1f5f9;
    --color-bg-warm: #fafaf9;
    --color-border-subtle: #e2e8f0;
    --color-border-medium: #cbd5e1;

    /* Typography Colors */
    --color-text-primary: #0f172a;   /* Slate 900 */
    --color-text-secondary: #475569; /* Slate 600 */
    --color-text-muted: #64748b;     /* Slate 500 */
    --color-text-inverse: #ffffff;

    /* Shadows - Premium Elevation */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-card-hover: 0 20px 40px -10px rgba(15, 61, 56, 0.2);

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

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Max Widths */
    --container-max-width: 1360px;
}