/* ==========================================================================
   Aven — Gen Z App Theme (v2)
   Overrides the brand tokens in style.css / native-app.css. Loaded AFTER
   both, site-wide, so every page (marketing, quiz, dashboard) re-skins in
   one place instead of touching 100+ templates individually. Nothing here
   deletes existing classes — it restyles the same hooks so structure and
   backend logic stay exactly as they were.
   ========================================================================== */

:root {
  /* Softer, punchier pastel palette. Kept the same variable NAMES the
     rest of the site already uses (--pink/--lime/--amber/--teal) so every
     existing component picks this up automatically. */
  --bg: #FFF9F4;
  --bg-soft: #FDF1FF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFBFE;
  --line: rgba(60, 20, 90, 0.07);

  --pink: #8B5CF6;          /* violet — primary */
  --pink-light: #C4B5FD;
  --pink-dim: rgba(139, 92, 246, 0.12);
  --lime: #14B88A;          /* mint */
  --lime-dim: rgba(20, 184, 138, 0.12);
  --amber: #FF8A5B;         /* coral */
  --amber-dim: rgba(255, 138, 91, 0.14);
  --teal: #3EC6E0;          /* sky */
  --teal-dim: rgba(62, 198, 224, 0.12);
  --sunny: #FFC94D;         /* accent yellow, new */

  --text: #241830;
  --text-dim: #6B5F80;
  --text-faint: #A79BB8;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 10px rgba(60, 20, 90, 0.05), 0 18px 40px -18px rgba(139, 92, 246, 0.28);
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .brand-mark { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---- Buttons: chunky pill shape, tactile press, no ambiguous overlap ---- */
.btn-primary, .btn-outline, .btn-secondary, button[type="submit"] {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--pink) 0%, #A855F7 55%, var(--amber) 130%) !important;
  color: #fff !important;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.55);
  border: none !important;
}
.btn-primary:hover, .btn-primary:visited, .btn-primary:active, .btn-primary:focus { color: #fff !important; }
.btn-primary:active, .btn-outline:active, .btn-secondary:active { transform: scale(0.96); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04); }
}
.btn-outline {
  border: 2px solid var(--line) !important;
  background: var(--bg-card) !important;
}

/* ---- Cards / tiles: bigger radius, softer shadow, breathing room so
   nothing visually overlaps or crowds on small screens ---- */
.tile, .sheet, .card, .quiz-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--line);
}
.tile-grid { gap: 14px !important; }

/* ---- App bar: friendlier, brand-tinted ---- */
.app-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.app-bar-title { font-family: var(--font-display); font-weight: 800; }

/* ---- Bottom nav: the core "Gen Z app" chrome ----
   Five equal-width tap targets (flex:1 each) so they can never overlap
   regardless of label length or screen width; active tab gets a filled
   pastel pill behind the icon instead of a thin underline, which reads
   more like a native app tab bar than a website nav. */
.bottom-nav {
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -12px rgba(60, 20, 90, 0.18);
  padding-left: 6px;
  padding-right: 6px;
  gap: 2px;
}
.bottom-nav-item {
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.64rem;
  padding: 6px 2px;
  gap: 2px;
  border-radius: var(--radius-md);
  margin: 6px 2px;
  transition: color .15s ease;
}
.bottom-nav-item svg { width: 24px; height: 24px; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.bottom-nav-item .nav-icon-badge {
  width: 40px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  transition: background .18s ease;
}
.bottom-nav-item.active { color: var(--pink); }
.bottom-nav-item.active .nav-icon-badge { background: var(--pink-dim); }
.bottom-nav-item.active svg { transform: translateY(-1px) scale(1.06); }
.bottom-nav-item.active::before { display: none; } /* replace old underline with the pill above */
.bottom-nav-item:active .nav-icon-badge { transform: scale(0.9); }

/* ---- FAB restyle to match new palette ---- */
.fab { background: linear-gradient(135deg, var(--pink), var(--sunny)); }

/* ---- Trait chips / badges: playful pastel fills instead of plain outline ---- */
.trait-chip {
  background: var(--pink-dim);
  color: var(--pink);
  border-radius: var(--radius-pill);
  font-weight: 700;
}

/* ---- Signup / auth screens ---- */
.auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  max-width: 440px; margin: 0 auto;
}
.auth-blob {
  width: 84px; height: 84px; border-radius: 28px;
  background: linear-gradient(135deg, var(--pink), var(--amber));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.auth-shell h1 { font-size: 1.6rem; margin: 0 0 6px; }
.auth-shell p.auth-sub { color: var(--text-dim); margin: 0 0 24px; font-size: 0.94rem; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.auth-field input {
  width: 100%; padding: 14px 16px; border-radius: 16px;
  border: 2px solid var(--line); font-size: 1rem; font-family: var(--font-body);
  background: var(--bg-card); color: var(--text);
}
.auth-field input:focus { outline: none; border-color: var(--pink); }
.auth-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 20px; }
.auth-consent input { margin-top: 3px; }
.auth-consent a { color: var(--pink); text-decoration: underline; font-weight: 600; }
.auth-error { background: var(--amber-dim); color: #B4501F; padding: 12px 14px; border-radius: 14px; font-size: 0.85rem; margin-bottom: 16px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.86rem; color: var(--text-dim); }
.auth-switch a { color: var(--pink); font-weight: 700; text-decoration: none; }
.otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 8px 0 20px; }
.otp-inputs input {
  width: 46px; height: 56px; text-align: center; font-size: 1.4rem; font-weight: 800;
  border-radius: 14px; border: 2px solid var(--line); font-family: var(--font-display);
}
.otp-inputs input:focus { outline: none; border-color: var(--pink); }

/* ---- Resume upload dropzone ---- */
.dropzone {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--pink); background: var(--pink-dim); }
.dropzone.is-dragover { border-color: var(--pink); background: var(--pink-dim); transform: scale(1.01); }
.dropzone-input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dropzone-icon { color: var(--pink); margin-bottom: 8px; }
.dropzone-icon svg { width: 32px; height: 32px; }
.dropzone-title { font-weight: 700; font-family: var(--font-display); margin: 0 0 2px; color: var(--text); }
.dropzone-sub { font-size: 0.82rem; color: var(--text-faint); margin: 0; }
.dropzone-filled { display: flex; align-items: center; gap: 12px; text-align: left; }
.dropzone-file-icon { color: var(--pink); flex: 0 0 auto; }
.dropzone-file-icon svg { width: 30px; height: 30px; }
.dropzone-file-meta { flex: 1; min-width: 0; }
.dropzone-file-name { font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-file-size { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-faint); }
.dropzone-remove {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dropzone-remove:hover { color: var(--amber); border-color: var(--amber); }
.dropzone-remove svg { width: 14px; height: 14px; }
.dropzone.has-file { cursor: default; border-style: solid; }

/* Dark mode is left intentionally minimal here — the site's own
   data-theme toggle already governs dark mode elsewhere. */