/* static/css/global-styles.css */

@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* --- NEW GLOBAL COLOR PALETTE & THEME VARIABLES --- */
:root {
  /* Surfaces & Borders */
  --card-bg-light: var(--light-accent); /* Light cards */
  --card-text-on-light: var(--dark-accent); /* Dark text for light cards */
  
  --surface-bg-dark: var(--dark-accent); /* Dark surfaces (nav, footer, some cards) */
  --surface-text-on-dark: var(--primary-text);
  --surface-text-secondary-on-dark: var(--secondary-text);
  --surface-border-color: var(--accent-red); /* Light purple border */

  --font-heading: var(--font-third);
  --font-body: var(--font-primary);
  --global-transition: all 0.25s ease-in-out;
  --radius-main: 12px;
  --radius-small: 8px;
  --button-radius: 35px;
}

/* --- Global HTML & Body Styles --- */

.dm-sans{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

html {
    height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--primary-text); /* Default text color, good for elements directly on gradient */
    width: 100%;
    min-height: 100vh;

    /* NEW GLOBAL GRADIENT BACKGROUND */
    background-color: var(--gradient-start); /* Fallback */
    background-image: var(--background-gradient);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- General Content Styling & Links --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-text); /* Default for headings on dark page/gradient */
    letter-spacing: 0.03em;
}
a {
    color: var(--highlight); /* Use highlight for links */
    text-decoration: none;
    transition: var(--global-transition);
}
a:hover {
    filter: brightness(1.2);
}

.lingo-laps{
    font-family: var(--font-lingo-laps);
    color: var(--highlight)
}
.fade-in-bottom {
    opacity: 0;
    animation: fadeInFromBottom 0.8s ease-out forwards;
    animation-delay: 3.3s; /* Adjust this delay so it starts after your last hero-content animation */
}

@keyframes runAndStop {
    0% {
        transform: translateX(-150vw); /* Start far off-screen to the left */
        opacity: 0;
    }
    60% {
        transform: translateX(0px); /* Arrives at its final position */
        opacity: 1;
    }
    /* Wobble / Brake effect */
    70% {
        transform: translateX(15px) rotate(2deg); /* Overshoot slightly right and tilt */
    }
    80% {
        transform: translateX(-10px) rotate(-1.5deg); /* Recoil left */
    }
    90% {
        transform: translateX(5px) rotate(0.5deg); /* Settle */
    }
    100% {
        transform: translateX(0px) rotate(0deg); /* Final resting position */
        opacity: 1;
    }
}
@keyframes fadeInFromBottom {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Standard Content Card (Light Background as per your example) --- */
.app-content-card {
    background-color: var(--card-bg-light);
    color: var(--card-text-on-light); /* Dark text on light card */
    border: 1px solid var(--surface-border-color);
    border-radius: var(--radius-main);
    padding: 1.5rem 2rem;
    margin: 2rem auto;
    max-width: 1100px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.app-content-card h1, 
.app-content-card h2, 
.app-content-card h3,
.app-content-card h4 {
    color: var(--card-text-on-light); /* Headings on light cards need dark text */
}
.app-content-card a {
    color: var(--cta-button-bg); /* Purple links on light cards */
}
.app-content-card a:hover {
    color: var(--gradient-start);
}

/* --- Buttons --- */
.button, button { /* General button reset/base */
    font-family: var(--font-heading);
    cursor: pointer;
    padding: 0.75em 1.5em;
    border-radius: var(--radius-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--global-transition), transform 0.1s ease;
    border: none;
}
.button-cta { /* Your example primary CTA */
    background-color: var(--cta-button-bg);
    color: var(--cta-button-text);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.button-cta:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}
.button-cta:active {
    transform: translateY(0px);
    filter: brightness(0.95);
}

.button-highlight {
    background-color: var(--highlight);
    color: var(--dark-accent); /* Dark text on yellow */
}
.button-highlight:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* --- Navigation & Footer (Example using dark surface) --- */
.top-nav {
    background-color: var(--surface-bg-dark);
    color: var(--surface-text-on-dark);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--surface-border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
}
.top-nav .container { display: flex; justify-content: space-between; align-items: center; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem;}
.top-nav .nav-left .burger-button { background: none; border: none; font-size: 2rem; color: var(--secondary-text); padding: 0 0.5rem; line-height: 1; }
.top-nav .nav-left .burger-button:hover { color: var(--primary-text); }
.top-nav .logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--primary-text); text-decoration: none; }
.top-nav .nav-right .user-profile-icon { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid var(--highlight); overflow: hidden; }
.top-nav .nav-right .user-profile-icon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* (Add styles for .avatar-dropdown and .side-nav, adapting colors) */
.avatar-dropdown { background-color: var(--surface-bg-dark); border-color: var(--surface-border-color); /* ... other styles ... */ }
.avatar-dropdown ul li a { color: var(--secondary-text); }
.avatar-dropdown ul li a:hover { background-color: var(--cta-button-bg); color: var(--primary-text); }
.side-nav { background-color: var(--surface-bg-dark); border-color: var(--surface-border-color); /* ... */ }
/* ... etc. for side-nav elements, using new palette ... */

footer {
    background-color: var(--surface-bg-dark);
    color: var(--secondary-text);
    padding: 1.5rem 0;
    text-align: center;
    border-top: 1px solid var(--surface-border-color);
    height: 70px; /* If you had explicit height */
    position: relative; /* Ensure it's above body background */
    z-index: 10;
}
footer .container a { color: var(--secondary-text); }
footer .container a:hover { color: var(--highlight); }


/* --- Adapting Existing Component Styles --- */
/* You'll need to go through your existing .nv- prefixed styles
   (or #matchmaking-ui, #react-game-container styles)
   and decide if they should become:
   1. Light cards (using .app-content-card or similar with --card-bg-light)
   2. Dark surfaces (using .app-dark-surface or similar with --surface-bg-dark)
   3. Or have their styles directly updated to use the new palette.
*/

/* Example: #matchmaking-ui becoming a dark surface */
#matchmaking-ui {
    background-color: var(--surface-bg-dark);
    color: var(--surface-text-on-dark);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--radius-main);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 700px; /* Example */
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    text-align: center;
}
#matchmaking-ui h1 { color: var(--primary-text); } /* White text on dark surface */
#matchmaking-ui #ws-status { color: var(--secondary-text); }
#matchmaking-ui #error-message {
    background-color: rgba(255, 209, 102, 0.1); /* --highlight with alpha */
    color: var(--highlight);
    border: 1px solid rgba(255, 209, 102, 0.3);
    /* ... other error message styles ... */
}
#matchmaking-ui .form-controls select,
#matchmaking-ui .form-controls input {
    background-color: #2a263f; /* Slightly lighter than --dark-accent for inputs */
    border-color: var(--surface-border-color);
    color: var(--primary-text);
}
#matchmaking-ui #find-game-btn { /* Becomes a primary CTA */
    background-color: var(--cta-button-bg);
    color: var(--cta-button-text);
    /* ... other button-cta styles ... */
}

/* Example: React Game Area */
#react-game-container {
    /* Option 1: Make it a dark surface card */
    background-color: var(--surface-bg-dark);
    color: var(--surface-text-on-dark);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--radius-main);
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 900px; /* Example */

    /* Option 2: Or make it a light card */
    /* background-color: var(--card-bg-light); */
    /* color: var(--card-text-on-light); */
}
#react-game-container h2 { /* Game title */
    color: var(--primary-text); /* If on dark surface */
    /* color: var(--dark-accent); /* If on light surface */
}