:root {
    /* KidKit - White and Light Blue Theme with Fun Color Splashes */
    --primary-color: #4A90E2;      /* Light blue primary */
    --secondary-color: #7FB3D3;    /* Medium blue secondary */
    --accent-color: #A8D5E2;       /* Light blue accent */
    --text-color: #2C3E50;         /* Dark gray for main text */
    --text-light: #FFFFFF;         /* White for light text */
    --background-color: #FFFFFF;   /* White main background */
    --background-light: #F0F8FF;   /* Very light blue for sections */
    --border-color: #E1F0F5;       /* Light blue for borders */
    --header-bg: #4A90E2;          /* Light blue for header */
    --footer-bg: #2C5F7E;          /* Darker blue for footer */
    --section-bg: #F0F8FF;         /* Very light blue for sections */
    --card-bg: #FFFFFF;           /* White for cards */
    
    /* Fun accent colors for icons */
    --icon-orange: #FF8C42;
    --icon-pink: #FF6B9D;
    --icon-yellow: #FFC857;
    --icon-green: #7ED857;
    --icon-purple: #9B59B6;
    --icon-red: #FF5252;
    
    /* Font family */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Header styling */
.header-text {
    color: var(--text-light) !important;
}

/* Section styling */
.section-bg {
    background-color: var(--section-bg) !important;
}

/* Card styling */
.card-bg {
    background-color: var(--card-bg) !important;
}

/* Link styling */
.text-link {
    color: var(--primary-color) !important;
    transition: color 0.2s ease !important;
}

.text-link:hover {
    color: var(--secondary-color) !important;
}

/* Fun colorful icon backgrounds */
.icon-orange { background-color: var(--icon-orange) !important; }
.icon-pink { background-color: var(--icon-pink) !important; }
.icon-yellow { background-color: var(--icon-yellow) !important; }
.icon-green { background-color: var(--icon-green) !important; }
.icon-purple { background-color: var(--icon-purple) !important; }
.icon-red { background-color: var(--icon-red) !important; }
.icon-blue { background-color: var(--primary-color) !important; }

/* Icon containers */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.75rem;
}

.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Safari-specific comprehensive fixes */
@supports (-webkit-appearance: none) {
    /* Body and main layout */
    body {
        background-color: #FFFFFF !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    main {
        flex: 1 !important;
        display: block !important;
    }
    
    /* Navigation fixes */
    nav {
        background-color: #4A90E2 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 50 !important;
        width: 100% !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    nav .tw-container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    nav .tw-flex {
        height: 4rem !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Navigation links */
    .nav-link {
        color: #ffffff !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }
    
    .nav-link:hover {
        color: #E8F4F8 !important;
    }
    
    /* Mobile menu fixes */
    #mobile-menu {
        background-color: #4A90E2 !important;
        position: fixed !important;
        top: 4rem !important;
        left: 0 !important;
        right: 0 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 40 !important;
    }
    
    #mobile-menu.tw-hidden {
        transform: translateY(-100%) !important;
    }
}