:root {

    /* Primary Colors */
    --color-primary: #0071BD;
    --color-primary-hover: #005F9F;

    --color-secondary: #39A9DC;

    /* Backgrounds */
    --color-white: #FFFFFF;

    --color-bg-main: #F8FAFC;

    --color-bg-secondary: #EEF2F7;

    --color-footer-bg: #0071BD;

    /* Text */
    --color-text-dark: #1E293B;

    --color-text-muted: #64748B;

    --color-text-light: #F8FAFC;

    /* UI */
    --color-border: #E2E8F0;

    --color-card-shadow:
        rgba(15, 23, 42, 0.05);

    /* Typography */
    --font-family-arabic:
        'Cairo',
        sans-serif;

    /* Radius */
    --border-radius-card: 18px;

    --border-radius-button: 999px;

    /* Layout */
    --container-width: 1200px;

    /* Animation */
    --transition-base:
        all 0.25s ease-in-out;

}