:root {

    /* ========== Brand ========== */

    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #EAF2FF;

    --secondary: #3B82F6;
    --secondary-hover: #2563EB;
    --secondary-light: #F0F7FF;

    --accent: #F59E0B;
    --accent-light: #FFF7E8;

    /* ========== Status ========== */

    --success: #16A34A;
    --success-light: #DCFCE7;

    --warning: #F59E0B;
    --warning-light: #FEF3C7;

    --danger: #DC2626;
    --danger-light: #FEE2E2;

    /* ========== Background ========== */

    --background: #F6F9FC;
    --background-accent: #306ad6bd;
    --background-secondary: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #FCFDFF;

    /* ========== Text ========== */

    --text: #172554;
    --text-secondary: #475569;
    --text-muted: #7C8AA5;
    --placeholder: #A5B4CC;

    /* ========== Border ========== */

    --border: #E5EDF8;
    --border-hover: #C9D9EE;

    /* ========== Buttons ========== */

    --btn-primary-bg: var(--primary);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-text: #FFFFFF;

    /* ========== Shadow ========== */

    --shadow-sm: 0 2px 8px rgba(37,99,235,.05);

    --shadow-md: 0 10px 30px rgba(37,99,235,.08);

    --shadow-lg: 0 18px 50px rgba(37,99,235,.12);

    /* ========== Border Radius ========== */

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    /* ========== Font ========== */
    --fs-icons : 45px;
    --fs-title: 30px;
    --fs-h1: 24px;
    --fs-h2: 24px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-xs: 13px;

    /* ========== Font Weight ========== */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ========== Layout ========== */

    --container: 1400px;

    --navbar-height: 80px;
    --menu-height: 80px;
    --card-height: 88px;
    --card-width: 300px;
    --search-filter-height: 80px;
    --input-height: 52px;
    --input-width: 300px;
    --input-width-mobile: 100%;

    --button-height: 52px;
    --footer-height: 100px;

    /* ========== Spacing ========== */

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    --gap: 10px;

    /* ========== Animation ========== */

    --transition: .25s ease;
}