@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* Primary Colors */
    --color-primary: #1E3A5F;
    /* Deep trust blue for financial confidence */
    --color-primary-50: #F0F4F8;
    /* Very light blue */
    --color-primary-100: #D9E2EC;
    /* Light blue */
    --color-primary-200: #BCCCDC;
    /* Medium light blue */
    --color-primary-300: #9FB3C8;
    /* Medium blue */
    --color-primary-400: #829AB1;
    /* Medium dark blue */
    --color-primary-500: #627D98;
    /* Base medium blue */
    --color-primary-600: #486581;
    /* Dark blue */
    --color-primary-700: #334E68;
    /* Darker blue */
    --color-primary-800: #243B53;
    /* Very dark blue */
    --color-primary-900: #1E3A5F;
    /* Primary deep trust blue */

    /* Secondary Colors */
    --color-secondary: #D4A574;
    /* Warm gold for prosperity and heritage */
    --color-secondary-50: #FDF8F3;
    /* Very light gold */
    --color-secondary-100: #F9EFDF;
    /* Light gold */
    --color-secondary-200: #F2DCBC;
    /* Medium light gold */
    --color-secondary-300: #EBC799;
    /* Medium gold */
    --color-secondary-400: #E3B176;
    /* Medium dark gold */
    --color-secondary-500: #D4A574;
    /* Base warm gold */
    --color-secondary-600: #C4955D;
    /* Dark gold */
    --color-secondary-700: #B38546;
    /* Darker gold */
    --color-secondary-800: #A17530;
    /* Very dark gold */
    --color-secondary-900: #8F651A;
    /* Darkest gold */

    /* Accent Colors */
    --color-accent: #E67E22;
    /* Vibrant orange for celebration moments */
    --color-accent-50: #FDF4ED;
    /* Very light orange */
    --color-accent-100: #FAEBD7;
    /* Light orange */
    --color-accent-200: #F6D5AE;
    /* Medium light orange */
    --color-accent-300: #F2BF85;
    /* Medium orange */
    --color-accent-400: #EEA95C;
    /* Medium dark orange */
    --color-accent-500: #E67E22;
    /* Base vibrant orange */
    --color-accent-600: #D35400;
    /* Dark orange */
    --color-accent-700: #BA4A00;
    /* Darker orange */
    --color-accent-800: #A04000;
    /* Very dark orange */
    --color-accent-900: #873600;
    /* Darkest orange */

    /* Background Colors */
    --color-background: #FAFBFC;
    /* Clean canvas for content clarity */
    --color-surface: #F4F6F8;
    /* Subtle card depth without distraction */

    /* Text Colors */
    --color-text-primary: #2C3E50;
    /* Strong readability for extended content */
    --color-text-secondary: #7F8C8D;
    /* Clear hierarchy without harsh contrast */

    /* Status Colors */
    --color-success: #27AE60;
    /* Growth green for positive reinforcement */
    --color-success-50: #E8F5E8;
    /* Very light green */
    --color-success-100: #C8E6C9;
    /* Light green */
    --color-success-200: #A5D6A7;
    /* Medium light green */
    --color-success-300: #81C784;
    /* Medium green */
    --color-success-400: #66BB6A;
    /* Medium dark green */
    --color-success-500: #4CAF50;
    /* Base green */
    --color-success-600: #43A047;
    /* Dark green */
    --color-success-700: #388E3C;
    /* Darker green */
    --color-success-800: #2E7D32;
    /* Very dark green */
    --color-success-900: #27AE60;
    /* Success green */

    --color-warning: #F39C12;
    /* Attention amber for important notices */
    --color-warning-50: #FEF7E0;
    /* Very light amber */
    --color-warning-100: #FDECC8;
    /* Light amber */
    --color-warning-200: #FCE4A6;
    /* Medium light amber */
    --color-warning-300: #FADB84;
    /* Medium amber */
    --color-warning-400: #F8D162;
    /* Medium dark amber */
    --color-warning-500: #F6C23E;
    /* Base amber */
    --color-warning-600: #F4B619;
    /* Dark amber */
    --color-warning-700: #F39C12;
    /* Warning amber */
    --color-warning-800: #E67E22;
    /* Very dark amber */
    --color-warning-900: #D35400;
    /* Darkest amber */

    --color-error: #E74C3C;
    /* Helpful red for gentle error guidance */
    --color-error-50: #FDEDEC;
    /* Very light red */
    --color-error-100: #FADBD8;
    /* Light red */
    --color-error-200: #F5B7B1;
    /* Medium light red */
    --color-error-300: #F1948A;
    /* Medium red */
    --color-error-400: #EC7063;
    /* Medium dark red */
    --color-error-500: #E74C3C;
    /* Base error red */
    --color-error-600: #CB4335;
    /* Dark red */
    --color-error-700: #B03A2E;
    /* Darker red */
    --color-error-800: #943126;
    /* Very dark red */
    --color-error-900: #78281F;
    /* Darkest red */

    /* Border Colors */
    --color-border-light: #E5E7EB;
    /* Light gray for minimal borders */
    --color-border-medium: #D1D5DB;
    /* Medium gray for form inputs */
    --color-border-dark: #9CA3AF;
    /* Dark gray for emphasis */
}

/* Custom Shadow Utilities */
.shadow-subtle {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.shadow-prominent {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Animation Classes */
.transition-smooth {
    transition: all 300ms ease-out;
}

.transition-meaningful {
    transition: all 400ms ease-out;
}

/* Typography Utilities */
.font-headline {
    font-family: 'Poppins', sans-serif;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

.font-accent {
    font-family: 'Playfair Display', serif;
}