/* ============================================================
   HypeHQ — Unified Styles (mobile-first)
   - Tokenized palette (single :root)
   - Legacy variable aliases (so old classes still work)
   - Header, footer, nav, mobile menu, buttons, inputs, cards
   - Hero, grids, pricing, forms, utilities
   - Onboarding stepper + chips (brand-aligned)
   ============================================================ */

/* === 1) DESIGN TOKENS ===================================== */
:root{
  /* === Brand (light theme) =============================== */
  /* Brand colors from your screenshot */
  --color-primary:       #0057a8; /* Primary */
  --color-primary-600:   #004a92; /* Hover / pressed */
  --color-primary-700:   #003b73; /* Darker text on light BG */
  --color-primary-100:   #f1f4f8; /* Primary background tint */

  --color-secondary:     #f37b7d; /* Secondary */
  --color-tertiary:      #ed1c24; /* Tertiary red */
  --color-alternate:     #0095da; /* Alternate / bright blue */

  /* Accent colors */
  --color-accent:        #f37b7d; /* Warm pink accent */
  --color-accent-600:    #ed1c24; /* Strong accent / pressed */
  --color-accent-soft:   #fde8e6; /* Soft pink background */
  --color-accent-alt:    #b2ffff; /* Very light accent */

  /* Neutrals / backgrounds */
  --neutral-000:         #ffffff; /* Secondary background */
  --neutral-100:         #f1f4f8; /* Primary background */
  --neutral-200:         #e4e6eb; /* Borders / dividers */
  --neutral-400:         #a0a4ac; /* Secondary text */
  --neutral-700:         #444b59; /* Body text */
  --neutral-900:         #1a1d23; /* Headline text */

  /* Utility text colors */
  --utility-text-primary:   #0057a8; /* Primary text */
  --utility-text-secondary: #4f6b8e; /* Soft blue/grey secondary */

  /* Semantic / status */
  --success:             #6bbd78; /* Success */
  --warning:             #ec9c4b; /* Warning */
  --danger:              #f8b63b; /* Error (from screenshot) */
  --info:                #0095da; /* Info / highlight */

  /* Elevation */
  --shadow-xs: 0 1px 6px  rgba(26,29,35,.05);
  --shadow-sm: 0 2px 10px rgba(26,29,35,.06);
  --shadow-md: 0 6px 18px rgba(26,29,35,.10);

  /* Layout / radius / container */
  --radius:       12px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-sm:    8px;
  --radius-pill:  999px;
  --container:    min(1100px, 92vw);

  /* Type scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --fs-300: .88rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;
  --fs-800: 1.875rem;
  --fs-900: 2.25rem;
  --fs-hero: clamp(2rem, 8vw, 3rem);
  --lh-tight:  1.15;
  --lh-normal: 1.5;

  /* === Legacy aliases (keep old classes working) ========= */
  --brand-blue:   var(--color-primary);
  --brand-line:   var(--neutral-200);
  --brand-slate:  var(--neutral-400);
  --brand-ink:    var(--neutral-900);
  --brand-cream:  var(--color-primary-100);
  --brand-red:    var(--danger);
}



/* Larger type on bigger screens */
@media (min-width:768px){
  :root{
    --fs-700: 1.75rem;
    --fs-800: 2rem;
    --fs-900: 2.5rem;
    --fs-hero: clamp(2.5rem, 5vw, 4rem);
  }
}

/* === 2) BASE ============================================== */
*{ box-sizing: border-box; }
html, body{ padding:0; margin:0; }
html, body{
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{
  color: var(--color-primary-700);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover{ color: var(--color-primary-600); text-decoration: underline; }

.container{ max-width: var(--container); margin-inline: auto; padding: 24px; }

/* Panel look for main content areas */
main.container{
  background: var(--neutral-000);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

/* Utilities */
.mt-0{ margin-top:0 }
.mt-2{ margin-top:8px }
.mt-3{ margin-top:12px }
.mt-4{ margin-top:16px }
.mt-6{ margin-top:24px }
.mt-8{ margin-top:32px }
.text-center{ text-align:center }
.w-full{ width:100% }
.muted{ color: var(--neutral-400) }
.hidden{ display:none !important }
.grid{ display:grid; gap:14px }
:where(a,button,[role="button"],input,select){ outline: none }
:where(a,button,[role="button"],input,select):focus-visible{
  outline:3px solid rgba(43,95,255,.35);
  outline-offset:2px;
}

/* === HEADER / NAV ====================================== */
.site-header,
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--neutral-000);
  border-bottom: 1px solid var(--brand-line);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Container row */
.nav,
.topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  /* Keep everything on one line unless mobile rules kick in */
  flex-wrap: nowrap;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
}

.brand-name{
  font-weight:800;
  letter-spacing:.2px;
  color: var(--neutral-900);
}

/* LOGO: make it header-friendly (64px was forcing wrapping) */
.brand-logo-img{
  width: 32px;
  height: 32px;
  display:block;
  border-radius:8px;
  object-fit:cover;
  box-shadow: 0 0 0 1px var(--neutral-200);
}

/* Link row
   Supports both: .nav-links (older) and .topbar .nav (new) */
.nav-links,
.topbar .nav{
  display:flex;
  align-items:center;
  gap:16px;
  white-space: nowrap;
}

.nav-links a,
.topbar .nav a{
  color: var(--color-primary-700);
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition: color .15s ease, background .15s ease;
  text-decoration: none;
}
.nav-links a:hover,
.topbar .nav a:hover{
  color: var(--color-alternate);
  background: var(--color-primary-100);
}

/* Auth / CTA area
   Supports both: .nav-cta (older) and .topbar .auth (new) */
.nav-cta,
.topbar .auth{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
}

/* prevent long emails from forcing wrap */
.topbar .auth .muted,
.nav-cta .muted{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hamburger */
.hamburger{
  border:0;
  background:transparent;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.hamburger span{
  width:20px;
  height:2px;
  background: var(--brand-ink);
  display:block;
  position:relative;
}
.hamburger span::before,.hamburger span::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:inherit;
}
.hamburger span::before{ top:-6px }
.hamburger span::after{ top: 6px }

/* Desktop rules */
@media(min-width:900px){
  .nav-links{ display:flex }
  .nav-cta{ display:flex }
  .hamburger{ display:none }
}

/* Mobile menu (toggle .open via JS) */
.mobile-menu{
  display:none;
  border-bottom:1px solid var(--brand-line);
  background: var(--neutral-000);
}
.mobile-menu.open{ display:block }
.mobile-menu a{
  display:block;
  padding:12px 20px;
  border-top:1px solid var(--brand-line);
  color: var(--neutral-700);
}
.mobile-menu a:hover{ background: var(--neutral-100); color: var(--color-primary-700); }

/* Optional: if you're using the NEW topbar pattern, hide link row on small screens */
@media (max-width: 768px){
  .topbar .nav { display:none; }
  .hamburger { display:block; }
}

/* === 4) BUTTONS =========================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 16px; border-radius: var(--radius-pill);
  border:1px solid transparent; font-weight:700; cursor:pointer;
  transition: .2s transform ease, .2s box-shadow ease, .15s background ease, .15s border-color ease, .15s color ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-tertiary));
  border-color: var(--color-primary-600);
  box-shadow: var(--shadow-md);
}

.btn-ghost{
  background: var(--neutral-000);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}
.btn-ghost:hover{
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-tertiary);
}


.btn-accent{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-accent:hover{
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

/* === 5) HERO ============================================== */
.hero{
  padding:48px 20px 28px;
  background:
    radial-gradient(900px 300px at 65% -10%, rgba(0,149,218,.18), transparent 60%),
    radial-gradient(700px 260px at 10% -20%, rgba(243,123,125,.18), transparent 55%),
    linear-gradient(var(--neutral-000), var(--neutral-000));
  border-bottom:1px solid var(--brand-line);
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--color-accent-soft);
  padding:6px 10px; border-radius: var(--radius-pill);
  border:1px solid var(--color-accent);
  color: var(--neutral-900);
}
.badge i{
  width:8px; height:8px; border-radius:50%;
  background: var(--color-accent); /* little pink dot */
}

.hero h1{ font-size: var(--fs-hero); line-height: var(--lh-tight); margin:14px 0 10px; color: var(--neutral-900); }
.hero p{ font-size: var(--fs-600); color: var(--brand-slate); margin:0 0 18px }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap }

/* === 6) CARDS / GRID ====================================== */
.grid.cols-3{ grid-template-columns: repeat(1, 1fr); }
@media(min-width:700px){ .grid.cols-3{ grid-template-columns: repeat(3, 1fr); } }

.card{
  border:1px solid var(--brand-line);
  border-radius: var(--radius);
  padding:18px;
  background: var(--neutral-000);
  box-shadow: var(--shadow-xs);
}

.card h3{
  margin:0 0 6px;
  font-size: var(--fs-700);
  color: var(--neutral-900);
  padding-left:8px;
  border-left:4px solid var(--color-secondary); /* pink accent stripe */
}
.card p{ margin:0; color: var(--brand-slate) }

/* === 7) PRICING =========================================== */
.pricing{ padding:32px 20px }
.price-tier{
  border:1px solid var(--brand-line);
  border-radius: var(--radius);
  padding:18px; background:#fff;
  box-shadow: var(--shadow-xs);
}
.price{ font-size: var(--fs-900); font-weight: 800; color: var(--neutral-900); }
.tier-name{ font-weight:800; letter-spacing:.3px; color: var(--neutral-900); }
.tier-list{ margin:10px 0 0; padding:0 0 0 18px; color: var(--brand-slate) }
.tier-list li{ margin:6px 0 }

/* === 8) FORMS / FIELDS ==================================== */
.field{ display:grid; gap:6px; margin:12px 0 }
.field label{ font-weight:700; color: var(--neutral-900); }

.input, select, textarea{
  width:100%; padding:12px;
  border:1px solid var(--brand-line); border-radius: var(--radius-sm);
  background: var(--neutral-000); color: var(--neutral-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43,95,255,.18);
}
.helper{ color: var(--brand-slate); font-size: var(--fs-300) }

/* === 9) FOOTER ============================================ */
.site-footer{
  border-top:1px solid var(--brand-line);
  margin-top:32px; background: var(--neutral-000);
}
.site-footer .foot-inner{
  padding:24px 20px; display:grid; gap:12px;
}
.site-footer a{ color: var(--neutral-700); text-decoration: none; }
.site-footer a:hover{ color: var(--color-primary-700); text-decoration: underline; }

/* === 10) ONBOARDING EXTRAS (Stepper + Chips) ============== */
.stepper{ display:flex; gap:12px; flex-wrap:wrap; }
.stepper .step{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius: 999px;
  border:1px solid var(--neutral-200);
  background: var(--neutral-100);
  color: var(--neutral-700); font-weight:600;
}
.stepper .step[aria-current="step"]{
  background: var(--color-primary-100);
  border-color: var(--color-primary);
  color: var(--color-primary-700);
  box-shadow: var(--shadow-sm);
}
/* Make sure actions always show and can wrap on small screens */
.player-card .header{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.player-card .player-actions{ display:flex !important; gap:8px; flex-wrap:wrap; }
.player-card .player-actions .btn{ padding:8px 10px; }
.player-card{ overflow:visible; } /* just in case a parent had overflow hidden */

/* Mad-Lib templates */
.ml-template-grid{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.ml-template{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--neutral-200);
  background: var(--neutral-100);
  border-radius:12px; padding:14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: var(--shadow-sm);
}
.ml-template:hover{ border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.ml-template input[type="radio"]{ margin-top:4px; flex-shrink:0; accent-color: var(--color-primary); }
.ml-template-body{
  color: var(--neutral-900);
  font-size: 16px; line-height: 1.6; font-weight: 500;
}
.ml-template input[type="radio"]:checked ~ .ml-template-body{
  background: var(--color-primary-100);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--color-primary-700);
}

/* Make templates go 3-across on desktop */
@media (min-width: 900px){
  .ml-template-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .ml-template{
    height: 100%;
  }
}


/* Adjective chips */
.chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--neutral-200);
  background: var(--neutral-100);
  color: var(--neutral-900);
  padding:8px 12px; border-radius:999px;
  cursor:pointer; font:14px/1.25 system-ui, sans-serif;
  transition: transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.chip[aria-pressed="true"]{
  background: var(--color-primary);
  color:#fff; border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(43,95,255,.25);
}
#ml-count{ font-weight:700; color: var(--color-primary-700); }

/*Player Cards*/
.player-actions{ display:flex !important; gap:8px; flex-wrap:wrap; }

.brand-name {
  font-weight: 800;
  color: var(--color-primary);
}

.brand {
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand:hover .brand-name {
  color: var(--color-primary-700);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 12px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 16px;
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
    margin-left: auto; /* ensures proper alignment */
  }
}

.nav-cta {
  display: none;
  gap: 10px;
  align-items: center;
}

@media(min-width: 900px) {
  .nav-cta {
    display: flex;
  }
}