:root {
    /* ESA Official Colors */
    --esa-blue: #003247;
    --esa-blue-light-light: #335E6F;
    --esa-blue-light: #335566;
    --esa-blue-dark: #001a29;
    --esa-teal: #00809E;
    --esa-teal-light: #2BA3C4;
    --esa-green: #819706;
    --esa-green-light: #77ff77;
    --esa-green-dark: #5a6a04;
    --esa-grey: #e8e8e4;
    --esa-grey-light: #f5f5f5;
    --esa-grey-dark: #b8b8b4;


        /* Deep Space Shades */
    --deep-space-2: #8197a6;
    --deep-space-1: #335e6f;
    --deep-space: #003247;

    /* Neutral Space */
    --neutral-space: #e8e8e4;

    /* Excite Red Shades */
    --excite-red-1: #f1666a;
    --excite-red: #ed1b2f;
    --excite-red-plus-1: #cf1d39;
    --excite-red-plus-2: #960136;

    /* Trusty Azure Shades */
    --trusty-azure-1: #6ddcf6;
    --trusty-azure-2: #c4f4ff;
    --trusty-azure: #009bdb;
    --trusty-azure-plus-1: #00619e;
    --trusty-azure-plus-2: #1e3378;

    /* Enlight Yellow Shades */
    --enlight-yellow-1: #ffc14e;
    --enlight-yellow: #fba118;
    --enlight-yellow-plus-1: #f47920;
    --enlight-yellow-plus-2: #a75534;

    /* Pure Teal Shades */
    --pure-teal-1: #76c8ae;
    --pure-teal: #00ae9d;
    --pure-teal-plus-1: #008e7a;
    --pure-teal-plus-2: #006762;

    /* Black & White */
    --black: #000000;
    --white: #ffffff;

    
    

    /* Base Colors */
    --black: #000000;
    --white: #ffffff;
    --gray: #bbb;
    --dark-gray: #555;

    /* ESA Theme Variables */
    --primary-color: var(--esa-teal);
    --primary-light: var(--esa-teal-light);
    --primary-dark: var(--esa-blue);
    --secondary-color: var(--esa-green);
    --accent-color: var(--esa-blue);
    --warning-color: #ffaa18;

    /* Background Colors */
    --background-color: var(--esa-grey-light);
    --surface-color: var(--white);
    --surface-elevated: var(--white);
    --surface-accent: var(--esa-teal);
    --header-bg: var(--esa-teal);
    --footer-bg: var(--esa-blue-dark);

    /* Text Colors */
    --text-primary: var(--esa-blue);
    --text-secondary: var(--esa-blue-light);
    --text-muted: var(--esa-grey-dark);
    --text-inverse: var(--white);
    --text-accent: var(--esa-green);

    /* Border and UI Colors */
    --border-color: #ddd;
    --border-light: #e2e8f0;
    --border-accent: var(--esa-teal);
    --shadow-color: rgba(0, 50, 71, 0.1);

    /* Status Colors */
    --error-bg: #fed7d7;
    --error-text: #742a2a;
    --success-bg: #d4edda;
    --success-text: var(--esa-green-dark);
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --info-bg: #d1ecf1;
    --info-text: var(--esa-blue);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Typography */
    --font-family: 'Roboto', 'Arial', sans-serif;
    --font-family-heading: 'Roboto', 'Arial', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    /* Borders */
    --border-radius: 4px;
    --border-radius-sm: 2px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 25px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --background-color: var(--esa-blue-dark);
    --surface-color: var(--esa-blue);
    --surface-elevated: var(--esa-blue-light);
    --text-primary: var(--white);
    --text-secondary: var(--esa-grey);
    --text-muted: #94a3b8;
    --text-inverse: var(--esa-blue);
    --border-color: var(--esa-blue-light);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --footer-bg: var(--esa-blue);


    /* ==== Typography Utilities ==== */
    .text-xs {
        font-size: var(--font-size-xs);
    }

    .text-sm {
        font-size: var(--font-size-sm);
    }

    .text-base {
        font-size: var(--font-size-base);
    }

    .text-lg {
        font-size: var(--font-size-lg);
    }

    .text-xl {
        font-size: var(--font-size-xl);
    }

    .text-2xl {
        font-size: var(--font-size-2xl);
    }

    .text-3xl {
        font-size: var(--font-size-3xl);
    }

    .text-4xl {
        font-size: var(--font-size-4xl);
    }

    /* ==== Spacing Utilities ==== */
    .p-xs {
        padding: var(--spacing-xs);
    }

    .p-sm {
        padding: var(--spacing-sm);
    }

    .p-md {
        padding: var(--spacing-md);
    }

    .p-lg {
        padding: var(--spacing-lg);
    }

    .p-xl {
        padding: var(--spacing-xl);
    }

    .pt-md {
        padding-top: var(--spacing-md);
    }

    .pb-md {
        padding-bottom: var(--spacing-md);
    }

    .mt-md {
        margin-top: var(--spacing-md);
    }

    .mb-md {
        margin-bottom: var(--spacing-md);
    }



}