:root {
    /* =========================================
       PRIMARY
    ========================================= */
    --color-brand-green: #3CB371;

    /* =========================================
       ACCENTS
    ========================================= */
    --color-accent-yellow: #FFD600;
    --color-accent-saffron: #EDBE44;
    --color-accent-success: #28A745;
    --color-accent-links-teal: #00A8CC;

    /* =========================================
       GREEN SHADES
    ========================================= */
    --color-green-50: #E6F9EE;
    --color-green-100: #C2F0D9;
    --color-green-200: #99E6C2;
    --color-green-300: #70DBAB;
    --color-green-400: #3FD08F;
    --color-green-500: #3CB371;
    --color-green-600: #339E63;
    --color-green-700: #2B8A55;
    --color-green-800: #237647;
    --color-green-900: #1B6039;

    /* =========================================
       GRAY SHADES (Design System)
    ========================================= */
    --color-gray-50: #F9F9F9;
    --color-gray-100: #F2F2F2;
    --color-gray-200: #E0E0E0;
    --color-gray-300: #CFCFCF;
    --color-gray-400: #AAAAAA;
    --color-gray-500: #7A7A7A;
    --color-gray-600: #5C5C5C;
    --color-gray-700: #3E3E3E;
    --color-gray-800: #2C2C2C;
    --color-gray-900: #1E1E1E;

    /* =========================================
       NEUTRALS (Legacy aliases)
    ========================================= */
    --color-neutral-charcoal: var(--color-gray-900);
    --color-neutral-dark-gray: var(--color-gray-600);
    --color-neutral-medium-gray: var(--color-gray-500);
    --color-neutral-gray: #E5E9F1;
    --color-neutral-medium-light-gray: var(--color-gray-300);
    --color-neutral-light-gray: var(--color-gray-100);
    --color-neutral-warm-white: var(--color-gray-50);
    --color-neutral-white: #FFFFFF;

    /* =========================================
       GRADIENTS
    ========================================= */
    --color-gradient-green: linear-gradient(135deg, var(--color-green-400) 0%, var(--color-green-600) 100%);

    /* =========================================
       BLUES
    ========================================= */
    --color-blue-50: #E6FAFD;

    /* =========================================
       ERRORS & NOTIFICATIONS
    ========================================= */
    --color-error-hex: #C7393F;
    --color-notification-red: #FF436F;

    /* =========================================
       FORM SEMANTIC TOKENS
    ========================================= */
    --form-text-placeholder: var(--color-gray-500);
    --form-border-default: rgba(207, 207, 207, 0.8); /* Gray-300 at 80% */
    --form-border-focus: var(--color-green-400);
    --form-border-error: var(--color-error-hex);
    --form-bg-error-fill: rgba(199, 57, 63, 0.1); /* Error at 10% */
    --form-bg-success-fill: rgba(60, 179, 113, 0.1); /* Green-500 at 10% */
    --form-bg-uneditable: var(--color-gray-100);
    --form-active: var(--color-green-500);
    --form-disabled-btn: rgba(63, 208, 143, 0.5); /* Green-400 at 50% */

    /* =========================================
       TEXT SEMANTIC TOKENS
    ========================================= */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --text-link: var(--color-accent-links-teal);

    /* =========================================
       RESPONSIVE SPACING TOKENS
    ========================================= */
    --section-spacing: 64px;
    --main-padding: 100px;
    --card-radius: 24px;
    --card-padding: 40px;
}

/* =========================================
   UTILITY CLASSES
========================================= */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-link { color: var(--text-link); }

.bg-page { background-color: var(--color-gray-50); }
.bg-surface { background-color: var(--color-neutral-white); }

.bg-confirmation { 
    background-color: #00A8CC1A; 
}

.text-error-hex { 
    color: var(--color-error-hex); 
}

/* =========================================
   RESPONSIVE SPACING OVERRIDES
========================================= */
@media (max-width: 1100px) {
    :root {
        --main-padding: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-spacing: 48px;
        --main-padding: 32px;
        --card-radius: 8px;
        --card-padding: 32px;
    }
}

@media (max-width: 396px) {
    :root {
        --section-spacing: 32px;
        --main-padding: 16px;
        --card-radius: 8px;
        --card-padding: 34px;
    }
}