:root {
    /* Primary Brand Colors - Emerald Green (Wealth/Growth) */
    --color-primary-50: #ecfdf5;
    --color-primary-100: #d1fae5;
    --color-primary-200: #a7f3d0;
    --color-primary-300: #6ee7b7;
    --color-primary-400: #34d399;
    --color-primary-500: #10b981;
    /* Main Brand Color */
    --color-primary-600: #059669;
    --color-primary-700: #047857;
    --color-primary-800: #065f46;
    --color-primary-900: #064e3b;

    /* Secondary/Accent Colors - Gold (Premium/Value) */
    --color-accent-50: #fefce8;
    --color-accent-100: #fef9c3;
    --color-accent-200: #fef08a;
    --color-accent-300: #fde047;
    --color-accent-400: #facc15;
    --color-accent-500: #eab308;
    --color-accent-600: #ca8a04;
    --color-accent-700: #a16207;
    --color-accent-800: #854d0e;
    --color-accent-900: #713f12;

    /* Neural/Surface Colors */
    --color-surface-50: #f8fafc;
    --color-surface-100: #f1f5f9;
    --color-surface-200: #e2e8f0;
    --color-surface-300: #cbd5e1;
    --color-surface-400: #94a3b8;
    --color-surface-500: #64748b;
    --color-surface-600: #475569;
    --color-surface-700: #334155;
    --color-surface-800: #1e293b;
    /* Dark Navy for Contrast */
    --color-surface-900: #0f172a;

    /* Semantic Colors */
    --color-bg-body: var(--color-surface-50);
    --color-bg-card: #ffffff;
    --color-text-main: var(--color-surface-900);
    --color-text-muted: var(--color-surface-500);
    --color-border-default: var(--color-surface-200);
}

/* Dark Mode Preparation */
.dark {
    --color-bg-body: var(--color-surface-900);
    --color-bg-card: var(--color-surface-800);
    --color-text-main: var(--color-surface-50);
    --color-text-muted: var(--color-surface-400);
    --color-border-default: var(--color-surface-700);
}

/* =========================================
   Semantic Components (Dynamic Theming)
   ========================================= */

/* Primary Button */
.btn-primary {
    width: 100%;
    height: 4rem;
    /* h-16 */
    background-color: var(--color-primary-600);
    color: white;
    border-radius: 1.5rem;
    /* rounded-[1.5rem] */
    font-weight: 900;
    /* font-black */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    /* text-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(16, 185, 129, 0.3);
    /* shadow-xl with primary tinge */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-700);
    transform: translateY(-0.125rem);
}

.btn-primary:active {
    transform: scale(0.95);
}

/* Secondary Button (Ghost/Outline) */
.btn-secondary {
    width: 100%;
    padding: 1.5rem 1rem;
    border-radius: 1rem;
    /* rounded-2xl */
    border: 2px solid var(--color-surface-200);
    background-color: transparent;
    color: var(--color-text-muted);
    font-weight: 900;
    font-size: 0.75rem;
    /* text-xs */
    transition: all 0.2s;
    cursor: pointer;
}

/* Primary Form Input */
.input-primary {
    width: 100%;
    background-color: var(--color-surface-50);
    border: 2px solid transparent;
    border-radius: 1rem;
    /* rounded-2xl */
    padding: 1.25rem 1.5rem;
    /* py-5 px-6 */
    font-weight: 700;
    /* font-bold */
    color: var(--color-text-main);
    transition: all 0.2s;
    outline: none;
}

.input-primary:focus {
    border-color: var(--color-primary-500);
    background-color: white;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.input-primary::placeholder {
    color: var(--color-surface-300);
}

/* Checkbox Style */
.checkbox-primary {
    height: 1rem;
    width: 1rem;
    color: var(--color-primary-600);
    border-radius: 0.25rem;
    border-color: var(--color-surface-300);
}

.checkbox-primary:focus {
    box-shadow: 0 0 0 2px var(--color-primary-500);
}

/* Link Style */
.link-primary {
    color: var(--color-primary-600);
    font-weight: 900;
    text-decoration: none;
    transition: color 0.2s;
}

.link-primary:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* Card Option (For Eligibility Steps) */
.card-option {
    position: relative;
    background-color: var(--color-bg-card);
    padding: 2rem;
    border-radius: 2.5rem;
    /* rounded-[2.5rem] */
    border: 2px solid var(--color-surface-50);
    text-align: left;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
}

.card-option:hover {
    border-color: var(--color-primary-600);
    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
    /* shadow-2xl with primary color */
}

.card-option.active {
    border-color: var(--color-primary-600);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* shadow-xl */
}

/* Icon Container in Cards */
.icon-container {
    height: 5rem;
    /* h-20 */
    width: 5rem;
    /* w-20 */
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}

.card-option .icon-container {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
}

.card-option:hover .icon-container,
.card-option.active .icon-container {
    background-color: var(--color-primary-600);
    color: white;
}

/* Wizard Progress Bar */
.progress-bar-fill {
    background-color: var(--color-primary-600);
}

.progress-bar-bg {
    background-color: var(--color-surface-100);
}