@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* --- CUSTOM COLOR PALETTE CONFIGURATION ---
   Palette:
   - Primary Blue:    #0075b8 (hsl(201, 100%, 36%))
   - Deep Midnight:   #010062 (hsl(241, 100%, 19%))
   - Bright Cyan:     #00B4D8 (hsl(190, 100%, 42%))
   - Soft Ice Aqua:   #90E0EF (hsl(189, 75%, 75%))
   - Light Canvas:    #fbfbfb (hsl(0, 0%, 98.4%))
   - Dark Charcoal:   #333333 (hsl(0, 0%, 20%))
---------------------------------------------- */

/* LIGHT THEME */
:root {
    --background: 0, 0%, 98.4%;      /* #fbfbfb Light Canvas */
    --foreground: 0, 0%, 20%;        /* #333333 Dark Charcoal Text */
    --card: 0, 0%, 100%;             /* #ffffff Pure White Cards */
    --card-foreground: 0, 0%, 20%;
    --popover: 0, 0%, 100%;
    --popover-foreground: 0, 0%, 20%;
    --primary: 201, 100%, 36%;       /* #0075b8 Primary Blue */
    --primary-foreground: 0, 0%, 100%;
    --secondary: 189, 45%, 93%;      /* Soft tinted aqua secondary */
    --secondary-foreground: 241, 100%, 19%;
    --muted: 201, 25%, 93%;
    --muted-foreground: 201, 15%, 45%;
    --accent: 190, 100%, 42%;        /* #00B4D8 Bright Cyan */
    --accent-foreground: 0, 0%, 100%;
    --border: 201, 20%, 86%;         /* Defined borders */
    --input: 201, 20%, 86%;
    --ring: 201, 100%, 36%;
    --radius: 0.75rem;
    --border-rgb: 208, 222, 233;

    /* Custom Palette Tokens */
    --brand-blue: #0075b8;
    --brand-midnight: #010062;
    --brand-cyan: #00B4D8;
    --brand-ice: #90E0EF;
    --brand-canvas: #fbfbfb;
    --brand-charcoal: #333333;
}

/* DARK THEME */
.dark {
    --background: 240, 50%, 6%;      /* Deep midnight dark */
    --foreground: 0, 0%, 98%;        /* Bright White Text */
    --card: 241, 45%, 10%;           /* Midnight Card */
    --card-foreground: 0, 0%, 98%;
    --popover: 241, 45%, 10%;
    --popover-foreground: 0, 0%, 98%;
    --primary: 190, 100%, 42%;       /* #00B4D8 Bright Cyan */
    --primary-foreground: 241, 100%, 10%;
    --secondary: 241, 35%, 16%;
    --secondary-foreground: 0, 0%, 98%;
    --muted: 241, 30%, 15%;
    --muted-foreground: 189, 30%, 70%;
    --accent: 201, 100%, 36%;        /* #0075b8 */
    --accent-foreground: 0, 0%, 100%;
    --border: 241, 25%, 18%;
    --input: 241, 25%, 18%;
    --ring: 190, 100%, 42%;
    --border-rgb: 35, 40, 68;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.25s ease, color 0.25s ease;
    overflow-x: hidden;
}

/* Palette utility classes */
.bg-brand-blue { background-color: #0075b8; }
.bg-brand-midnight { background-color: #010062; }
.bg-brand-cyan { background-color: #00B4D8; }
.bg-brand-ice { background-color: #90E0EF; }
.bg-brand-charcoal { background-color: #333333; }

.text-brand-blue { color: #0075b8; }
.text-brand-midnight { color: #010062; }
.text-brand-cyan { color: #00B4D8; }
.text-brand-ice { color: #90E0EF; }
.text-brand-charcoal { color: #333333; }

.border-brand-blue { border-color: #0075b8; }
.border-brand-cyan { border-color: #00B4D8; }
.border-brand-ice { border-color: #90E0EF; }

/* Custom Card Elevations */
.coursera-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.coursera-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(0, 117, 184, 0.16), 0 8px 16px -4px rgba(1, 0, 98, 0.06);
    border-color: #0075b8;
}

.dark .coursera-card:hover {
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 180, 216, 0.2);
    border-color: #00B4D8;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
    background: #0075b8;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #010062;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
    animation: floatSlow 4s ease-in-out infinite;
}