:root {

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

    --color-primary: #4F46E5;
    --color-primary-hover: #4338CA;

    --color-secondary: #14B8A6;

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* ===== Backgrounds ===== */

    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;

    /* ===== Typography ===== */

    --color-text: #111827;
    --color-text-light: #6B7280;

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

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

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

    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,.08);

    /* ===== Container ===== */

    --container-width: 1200px;

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

    --transition: 250ms ease;

}