/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* CSS Variables for consistent theming */
:root {
    /* Logo Colors - Primary Palette */
    --primary-color: #283b89;          /* Dark blue from logo */
    --primary-dark: #1e2d6b;           /* Darker shade of primary */
    --primary-light: #4a5ba3;          /* Lighter shade of primary */
    --secondary-color: #17adc3;        /* Light blue/cyan from logo */
    --secondary-dark: #128fa1;         /* Darker shade of secondary */
    --secondary-light: #3fbdd1;        /* Lighter shade of secondary */
    --accent-color: #ffffff;           /* White from logo */
    
    /* Extended palette based on logo colors */
    --ocean-blue: #2859c4;             /* Vibrant blue between primary and secondary */
    --sky-blue: #5bc5d4;               /* Soft sky blue derived from secondary */
    --powder-blue: #e3f4f7;            /* Very light blue for backgrounds */
    --deep-sea: #1a2456;               /* Deeper version of primary for contrast */
    --aqua: #20c4db;                   /* Vibrant aqua close to secondary */
    
    /* Functional colors using logo palette */
    --success-color: #17adc3;          /* Using secondary color for success */
    --warning-color: #f7b731;          /* Warm yellow that complements blues */
    --error-color: #ee5a52;            /* Coral red that works with blues */
    --info-color: #17adc3;             /* Using secondary for info */
    
    /* Neutral colors with blue undertones */
    --text-primary: #1a2456;           /* Deep blue-black for primary text */
    --text-secondary: #4a5ba3;         /* Primary light for secondary text */
    --text-tertiary: #8294c4;          /* Muted blue for tertiary text */
    --text-muted: #b3c0e3;             /* Very light blue for muted text */
    
    /* Background colors */
    --bg-primary: #ffffff;             /* Pure white */
    --bg-secondary: #f8fbff;           /* Very light blue tint */
    --bg-tertiary: #e3f4f7;            /* Powder blue */
    --bg-accent: #283b89;              /* Primary color for accent backgrounds */
    
    /* Border colors */
    --border-color: #d1ddf2;           /* Light blue-gray */
    --border-light: #e8f0fa;           /* Very light blue border */
    --border-focus: #17adc3;           /* Secondary color for focus states */
    
    /* Typography */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 19px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --text-4xl: 34px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    
    /* Navigation */
    --nav-height: 64px;
    --bottom-nav-height: 70px;
    
    /* Border radius - more rounded for friendly feel */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Enhanced shadows with blue tints */
    --shadow-sm: 0 2px 8px rgba(40, 59, 137, 0.08);
    --shadow-md: 0 4px 16px rgba(40, 59, 137, 0.12);
    --shadow-lg: 0 8px 24px rgba(40, 59, 137, 0.15);
    --shadow-xl: 0 16px 32px rgba(40, 59, 137, 0.18);
    --shadow-2xl: 0 24px 48px rgba(40, 59, 137, 0.20);
    --shadow-primary: 0 8px 24px rgba(40, 59, 137, 0.25);
    
    /* Transitions and Animations */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}