:root {

    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --erp-primary: #078C95;
    --erp-primary-dark: #056A72;
    --erp-primary-soft: #E7F6F7;

    --erp-secondary: #171717;

    --erp-success: #10B981;
    --erp-warning: #F59E0B;
    --erp-danger: #EF4444;
    --erp-info: #078C95;


    /* =====================================================
       BACKGROUND
    ===================================================== */

    --erp-bg: #F5F7F7;
    --erp-card: #FFFFFF;

    --erp-sidebar: #171717;
    --erp-navbar: #FFFFFF;
    --erp-surface-muted: #F8FAFC;
    --erp-surface-elevated: #FFFFFF;
    --erp-input-bg: #FFFFFF;
    --erp-hover: #F1F5F9;


    /* =====================================================
       TEXT
    ===================================================== */

    --erp-text: #1D2939;
    --erp-text-light: #667085;
    --erp-heading: #101828;
    --erp-white: #FFFFFF;


    /* =====================================================
       BORDER
    ===================================================== */

    --erp-border: #DCE4E5;


    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-sm:
        0 1px 3px rgba(15, 23, 42, 0.08);

    --shadow-md:
        0 10px 25px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 25px 50px rgba(15, 23, 42, 0.10);


    /* =====================================================
       RADIUS
    ===================================================== */

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;


    /* =====================================================
       SIDEBAR / NAVBAR
    ===================================================== */

    --sidebar-width: 232px;
    --sidebar-collapse: 74px;

    --navbar-height: 72px;


    /* =====================================================
       FONT
    ===================================================== */

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 28px;
    --font-xxl: 36px;
    --type-display: clamp(28px, 2.1vw, 34px);
    --type-title: 22px;
    --type-heading: 17px;
    --type-body: 14px;
    --type-label: 12px;
    --type-caption: 11px;


    /* =====================================================
       SPACING
    ===================================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;


    /* =====================================================
       ANIMATION
    ===================================================== */

    --transition: 0.25s ease;
}

html[data-erp-theme="dark"] {
    color-scheme: dark;
    --erp-bg: #0B1220;
    --erp-card: #111B2B;
    --erp-navbar: #0F1928;
    --erp-surface-muted: #162235;
    --erp-surface-elevated: #18263A;
    --erp-input-bg: #0E1928;
    --erp-hover: #1D2C42;
    --erp-text: #D8E2EE;
    --erp-text-light: #9EADC0;
    --erp-heading: #F5F8FC;
    --erp-border: #2A3A50;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.38);
}

html[data-erp-theme="light"] { color-scheme: light; }