:root {

    /* NOC Inspired Color System */
    --primary-color: #005baa;
    --primary-dark: #003b73;
    --primary-light: #e8f3fb;

    --secondary-color: #00843d;
    --accent-color: #f5b400;

    --background-color: #f6f8fb;
    --surface-color: #ffffff;

    --text-color: #1d2733;
    --text-muted: #5c6779;

    --border-color: #dce3eb;

    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;


    /* Typography */
    --font-family:
    "Cairo",
    "Tajawal",
    "Segoe UI",
    Arial,
    sans-serif;


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


    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 70px;


    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;


    /* Shadow */
    --shadow-sm:
    0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
    0 8px 25px rgba(0,0,0,.12);


    /* Animation */
    --transition:
    .3s ease;


    /* Responsive */
    --mobile: 576px;
    --tablet: 768px;
    --desktop: 1200px;

}