/* Tailwind CSS Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Color Variables */
:root {
    --bg: #1c1d1f;
    --panel: #2a2b2f;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --line: #3a3b3f;
    --c1: #1BB88D;
    --c2: #FAC38D;
    --c3: #F1E3A4;
    --c4: #CE7C66;
    --c5: #8EBE73;
}

/* Global Layout Improvements */
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 16px;
    /* Mobile optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Inter', 'Oxanium', -apple-system, BlinkMacSystemFont, sans-serif;
}

.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(135deg, 
        rgba(27, 184, 141, 0.1) 0%, 
        rgba(206, 124, 102, 0.1) 50%, 
        rgba(27, 184, 141, 0.1) 100%);
    pointer-events: none;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background: 
        radial-gradient(circle at 30% 20%, rgba(27, 184, 141, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(206, 124, 102, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

.space-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.6;
    filter: blur(1px);
    will-change: transform;
}

.star {
    background: white;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.planet {
    background: radial-gradient(circle, var(--planet-color, #8EBE73) 0%, var(--planet-shade, #6d9a57) 100%);
    box-shadow: 0 0 10px var(--planet-shade);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    /* Improve touch targets */
    button, 
    a, 
    input, 
    select, 
    .course-option {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better scrolling on mobile */
    body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Prevent zoom on input focus */
    input, 
    select, 
    textarea {
        font-size: 16px;
    }
    
    /* Improve modal positioning on mobile */
    #newCourseModal {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }
    
    /* Better course grid spacing */
    #courseGrid {
        gap: 1rem;
    }
    
    /* Improve hero section spacing */
    .hero-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    
    h1 {
        font-size: 1.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    #courseModalInitial,
    #courseTopicInput {
        margin: 0.5rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .py-12 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.logo-font {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

/* High Contrast Mode */
@media (forced-colors: active) {
    :root {
        --bg: Canvas;
        --panel: Canvas;
        --text: CanvasText;
        --muted: GrayText;
        --line: ButtonText;
        --c1: Highlight;
        --c2: LinkText;
        --c3: VisitedText;
        --c4: ButtonText;
        --c5: ActiveText;
    }
    
    body {
        background: var(--bg) !important;
        color: var(--text) !important;
    }
    
    .bg-bg, .bg-panel, .bg-line,
    nav, header, footer, .modal, .card {
        background: var(--bg) !important;
        color: var(--text) !important;
        border-color: var(--line) !important;
    }
    
    button, a, input, select, .btn, .course-option {
        border: 2px solid var(--text) !important;
        background: var(--bg) !important;
        color: var(--text) !important;
    }
    
    .text-muted {
        color: var(--muted) !important;
    }
    
    /* Ensure text is visible on backgrounds */
    * {
        text-shadow: none !important;
    }
    
    /* Progress bars in high contrast mode */
    .progress-bar,
    .h-2.bg-line\/50,
    .h-2\.5.bg-line\/50,
    #questionProgressBar,
    #courseCompletionBar,
    #quizAccuracyBar,
    #retentionRateBar {
        border: 2px solid ButtonText !important;
        background-color: Canvas !important;
        height: 10px !important;
        min-height: 10px !important;
        border-radius: 4px !important;
    }
    
    .progress-fill,
    .h-2.bg-c1,
    .h-2.bg-c3,
    .h-2\.5.bg-c1,
    .h-2\.5.bg-c3,
    #questionProgressBar > div,
    #courseCompletionBar > div {
        background-color: Highlight !important;
        border: 1px solid ButtonText !important;
        height: 100% !important;
        min-height: 6px !important;
        border-radius: 4px !important;
    }
    
    .bg-c2,
    .h-2.bg-c2,
    .h-2\.5.bg-c2,
    #quizAccuracyBar > div {
        background-color: LinkText !important;
        border: 1px solid ButtonText !important;
    }
    
    .bg-c4,
    .h-2.bg-c4,
    .h-2\.5.bg-c4,
    #retentionRateBar > div {
        background-color: ButtonText !important;
        border: 1px solid ButtonText !important;
    }
    
    /* Fix for gradients and transparent elements */
    .gradient-bg, .gradient-bg::before {
        display: none;
    }
    
    /* Ensure form controls are visible */
    input, textarea, select {
        background: var(--bg) !important;
        border: 2px solid var(--text) !important;
        color: var(--text) !important;
    }
    
    /* Fix for focus states */
    :focus-visible {
        outline: 3px solid #ffff00 !important;
        outline-offset: 2px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on high DPI screens */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Focus improvements for accessibility */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--c1);
    outline-offset: 2px;
}

/* Better button hover states on touch devices */
@media (hover: none) {
    button:hover,
    .course-option:hover {
        transform: none;
    }
    
    button:active,
    .course-option:active {
        transform: none;
    }
}

@keyframes shimmer {
    0% { 
        background-position: -200% 0; 
    }
    100% { 
        background-position: 200% 0; 
    }

    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.7; 
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-slideUp {
    animation: slideUp 0.6s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

textarea:focus {
    transform: none;
    box-shadow: 0 4px 12px rgba(27, 184, 141, 0.15);
}

button:hover {
    transform: none;
}

button:active {
    transform: none;
}

input, textarea, button, select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Ripple Effect */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 29, 31, 0.12) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 1s ease, height 1s ease;
}

.ripple-effect:hover::after {
    width: 250px;
    height: 250px;
}

/* Magnetic Hover Effect - Only color changes */
.magnetic {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetic:hover {
    transform: none;
}

/* Safe area insets for devices with notches */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    nav {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}