@font-face {
    font-family: "Montserrat";
    src: url("../assets/fonts/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../assets/fonts/Archivo.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    src: url("../assets/fonts/EBGaramond.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/Inter.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junicode";
    src: url("../assets/fonts/Junicode.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("../assets/fonts/LibreBaskerville.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("../assets/fonts/Merriweather.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../assets/fonts/OpenDyslexic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%; /* Light mode background - white */
        --foreground: 222.2 84% 4.9%; /* Light mode text */

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 221.2 83.2% 53.3%; /* Sky blue */
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%; /* Light gray for active explore panel item */
        --secondary-foreground: 222.2 47.4% 11.2%; /* Text for active explore panel item */

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%; /* Muted text */

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%; /* Light border, e.g., stone-200 */
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%; /* Sky blue for focus rings */

        --radius: 0.5rem;
    }

    .dark {
        --background: 224 71.4% 4.1%; /* Dark mode background - slate-900 */
        --foreground: 210 20% 98%; /* Dark mode text - slate-50 */

        --card: 222.2 47.4% 11.2%;
        --card-foreground: 210 20% 98%;

        --popover: 222.2 47.4% 11.2%;
        --popover-foreground: 210 20% 98%;

        --primary: 217.2 91.2% 59.8%; /* Brighter sky blue for dark mode */
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%; /* Darker gray for active explore panel item */
        --secondary-foreground: 210 20% 98%; /* Text for active explore panel item */

        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%; /* Lighter muted text for dark */

        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 20% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;

        --border: 217.2 32.6% 25.5%; /* Darker border, e.g., slate-700 */
        --input: 217.2 32.6% 25.5%;
        --ring: 217.2 91.2% 59.8%;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        font-family: "Montserrat", "Segoe UI", sans-serif;
        letter-spacing: 0.05em;
        font-size: 18px;
        font-feature-settings:
            "rlig" 1,
            "calt" 1;
    }
    body.font-dyslexia {
        font-family: "OpenDyslexic", sans-serif;
    }
    body.font-dyslexia h1,
    body.font-dyslexia h2,
    body.font-dyslexia h3,
    body.font-dyslexia h4,
    body.font-dyslexia h5,
    body.font-dyslexia h6,
    body.font-dyslexia button,
    body.font-dyslexia [role="button"],
    body.font-dyslexia input,
    body.font-dyslexia select,
    body.font-dyslexia textarea,
    body.font-dyslexia label {
        font-family: "OpenDyslexic", sans-serif;
        font-weight: 400;
    }
    body.reduce-motion *,
    body.reduce-motion *::before,
    body.reduce-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
    }
    button,
    [role="button"],
    input,
    select,
    textarea,
    label {
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
    }
}

/* Custom scrollbar styles for a more modern look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-stone-100 dark:bg-slate-700;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    @apply bg-stone-300 dark:bg-slate-500;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-stone-400 dark:bg-slate-400;
}

/* Ensure html and body take full height for sticky footer and panel */
html,
body,
#root {
    height: 100%;
    overflow: hidden;
}

/* Custom shadow for elements fixed at the top or bottom */
.shadow-top-lg {
    box-shadow:
        0 -4px 6px -1px rgb(0 0 0 / 0.1),
        0 -2px 4px -2px rgb(0 0 0 / 0.1);
}

@keyframes app-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-fade-in {
    animation: app-fade-in 320ms ease-out;
}

body.reduce-motion .app-fade-in {
    animation: none;
}

@keyframes tutorial-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.6);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(14, 165, 233, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
        transform: scale(1);
    }
}

.tutorial-pulse {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #0ea5e9;
    animation: tutorial-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

.tutorial-bubble {
    position: fixed;
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
}

.dark .tutorial-bubble {
    background: #0f172a;
    border-color: #334155;
}

.tutorial-target-active {
    position: relative;
    z-index: 130;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.9);
    border-radius: 10px;
}

body.reduce-motion .tutorial-pulse {
    animation: none;
}