<script>
tailwind.config = {
    theme: {
        extend: {
            colors: {
                /* Ally Bank Primary Green */
                primary: {
                      50:  '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',  // anchor
        600: '#2563eb',
        700: '#1e4fc7',
        800: '#1a3f9e',
        900: '#152f75',
                },

                /* Ally Bank Yellow - Accent / Warning */
                champagne: {
                    50:  '#fefcf3',
                    100: '#fdf6e1',
                    200: '#fbedc3',
                    300: '#f8e09b',
                    400: '#f0d06e',
                    500: '#EBBC46',  // MAIN - Ally Bank Yellow
                    600: '#c89e3a',
                    700: '#a37e2e',
                    800: '#7d5f23',
                    900: '#4d3a16',
                },

                /* Ally Bank Surfaces - Light Theme */
                slate: {
                    50:  '#FFFFFF',
                    100: '#F9F9F9',
                    200: '#DFE5E5',
                    300: '#BFC9C9',
                    400: '#A0ACAC',
                    500: '#7A8A8A',
                    600: '#5A6868',
                    700: '#3A4848',
                    800: '#1E2C2C',
                    850: '#152020',
                    900: '#0D1B23',
                    950: '#081318',
                },

                /* Light Surfaces */
                cream: {
                    50: '#FFFFFF',
                    100: '#F9F9F9',
                    DEFAULT: '#DFE5E5',
                },

                /* Ally Bank Status Colors */
                success: {
                    light: '#d4f4dd',
                    DEFAULT: '#28A745',
                    dark: '#1e7e34',
                },
                alert: {
                    light: '#fff3cd',
                    DEFAULT: '#EBBC46',
                    dark: '#c89e3a',
                },
                danger: {
                    light: '#fce4ec',
                    DEFAULT: '#D55672',
                    dark: '#b84460',
                }
            },

            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
                display: ['Playfair Display', 'Georgia', 'serif'],
            },

            boxShadow: {
                'soft': '0 1px 3px rgba(0,0,0,0.08)',
                'medium': '0 4px 12px rgba(0,0,0,0.1)',
                'strong': '0 8px 24px rgba(0,0,0,0.15)',
                'inner-soft': 'inset 0 1px 2px rgba(0,0,0,0.06)',
            },

            animation: {
                'fade-in': 'fadeIn .4s ease-out',
                'slide-up': 'slideUp .5s cubic-bezier(0.16, 1, 0.3, 1)',
                'scale-in': 'scaleIn .3s cubic-bezier(0.16, 1, 0.3, 1)',
                'shimmer': 'shimmer 2s infinite',
            },

            keyframes: {
                fadeIn: { 
                    '0%': { opacity: '0' }, 
                    '100%': { opacity: '1' } 
                },
                slideUp: {
                    '0%': { transform: 'translateY(24px)', opacity: '0' },
                    '100%': { transform: 'translateY(0)', opacity: '1' },
                },
                scaleIn: {
                    '0%': { transform: 'scale(0.92)', opacity: '0' },
                    '100%': { transform: 'scale(1)', opacity: '1' },
                },
                shimmer: {
                    '0%': { backgroundPosition: '-200% 0' },
                    '100%': { backgroundPosition: '200% 0' },
                }
            },

            backgroundImage: {
            }
        }
    }
}
</script>
<style>
:root {
    /* Ally Bank Primary Palette */
    --color-primary: #2d8659;
    --color-primary-dark: #1f6b45;
    --color-primary-light: #4da576;
    
    /* Ally Bank Accent */
    --champagne: #EBBC46;
    --champagne-dark: #c89e3a;
    --champagne-light: #f0d06e;
    
    /* Ally Bank Backgrounds */
    --color-bg-base: #FFFFFF;
    --color-bg-surface: #F9F9F9;
    --color-bg-muted: #DFE5E5;
    --bg-light: #FFFFFF;
    --card-light: #FFFFFF;
    
    /* Ally Bank Status */
    --success: #28A745;
    --warning: #EBBC46;
    --danger: #D55672;
    
    /* Ally Bank Text */
    --color-text-primary: #0D1B23;
    --color-text-secondary: #4A4A4A;
    --text-light: #0D1B23;
    --text-muted: #7A7A7A;
    
    /* Ally Bank Borders */
    --color-border: #E0E5E5;
    --border-light: #E0E5E5;
    --border-dark: #C8D1D1;
    --divider: #E0E5E5;
}

/* Ally Bank Light Theme Background */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-bg-surface);
    min-height: 100vh;
    color: var(--color-text-primary);
    letter-spacing: -0.011em;
}

/* Clean sans-serif for headings */
.font-display {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}

/* Primary Action Button */
.gradient-primary {
    background: var(--color-primary);
    transition: background 0.2s ease;
}

.gradient-primary:hover {
    background: var(--color-primary-dark);
}

/* Card */
.gradient-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
}

/* Subtle border */
.border-elegant {
    border-color: var(--color-border);
}

/* Premium Status Badge */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
}

/* Smooth Transitions - only on interactive elements */
a, button, input, select, textarea {
    transition-property: color, background-color, border-color, opacity;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/* Balance Number Styling */
.balance-display {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}



</style>
