/**
 * KidOS Brand Guide v1
 * Applied globally across all pages.
 * This file overrides the dark-theme inline styles on each page.
 *
 * Design philosophy: "Reduce stimulation, increase understanding."
 * Light, soft, spacious, intentional.
 */

/* ── FONT IMPORT ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* ── CSS VARIABLES OVERRIDE ────────────────────────────────────── */
:root {
  /* Base */
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --surface-2: #F7F5F2;
  --surface-3: #F0EDE8;
  --border: #E6E2DD;
  --border-dim: #EDE9E4;

  /* Text */
  --text: #2A2A2A;
  --text-dim: #6B6B6B;
  --text-muted: #9B9B9B;

  /* Brand anchors */
  --accent: #2E4057;          /* Deep navy — primary CTA */
  --accent-hover: #243347;
  --accent-glow: rgba(46, 64, 87, 0.08);
  --accent-soft: rgba(46, 64, 87, 0.08);
  --accent-border: rgba(46, 64, 87, 0.2);
  --accent-secondary: #6B8CA3;  /* Muted blue — secondary */

  /* Editorial warm layer */
  --cream: #F4EFEA;
  --taupe: #D8CFC4;
  --brown: #4A3F35;

  /* Status */
  --success: #5A8F6F;
  --error: #C65D3B;

  /* Archetype colors — muted, accent-only (10–30%) */
  --explorer:   #7FAFA3;
  --builder:    #7DA2C9;
  --connector:  #E07A5F;
  --sensor:     #E6C9A8;
  --challenger: #C65D3B;
  --thinker:    #8FAF9B;

  /* Legacy compatibility aliases */
  --green:   #7FAFA3;
  --blue:    #7DA2C9;
  --purple:  #8FAF9B;
  --yellow:  #E6C9A8;
  --pink:    #E07A5F;
  --red:     #C65D3B;

  /* Chat-specific */
  --user-bg: #EEF3F8;
  --user-border: rgba(107, 140, 163, 0.25);
}

/* ── BODY ──────────────────────────────────────────────────────── */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── HEADINGS / TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.logo,
.section-title,
.welcome-heading,
.empty-title,
.question-scenario,
.info-screen h2,
.loading-screen h3 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Insight / editorial text uses serif */
.description-band p,
blockquote,
.editorial-text {
  font-family: 'Merriweather', Georgia, serif !important;
}

/* ── NAV ───────────────────────────────────────────────────────── */
nav {
  background: rgba(247, 245, 242, 0.95) !important;
  border-bottom-color: var(--border) !important;
}

.logo {
  color: var(--text) !important;
}

.nav-tag {
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
  background: transparent !important;
}

.nav-btn,
.back-btn {
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
.nav-btn:hover,
.back-btn:hover {
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

/* ── PROGRESS BAR ──────────────────────────────────────────────── */
.progress-container {
  background: var(--border) !important;
}
.progress-bar {
  background: var(--accent) !important;
}

/* ── SECTION LABELS — no all-caps ──────────────────────────────── */
.section-label,
.section-eyebrow,
.welcome-label,
.child-name-label,
.intro-label,
.hero-label {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: var(--accent-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}

/* Keep small caps style for minimal metadata labels */
.meta-label,
.bar-label-cap,
.step-time,
.question-number {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
}

/* ── CARDS ─────────────────────────────────────────────────────── */
.card,
.card-inner,
.step,
.report-preview,
.loading-card,
.no-quiz-card,
.nav-tile,
.archetype-card-landing {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ── INPUTS & SELECTS ──────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea,
.form-group input,
.form-group select {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: 'Manrope', sans-serif !important;
}
input:focus,
select:focus,
textarea:focus,
.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
.form-group select option {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn-primary,
.cta-btn,
.cta-btn-small,
.btn,
.send-btn {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  font-family: 'Manrope', sans-serif !important;
  border: none !important;
}
.btn-primary:hover,
.cta-btn:hover,
.cta-btn-small:hover,
.btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: none !important;         /* No glow */
  filter: none !important;
}
.btn-primary:disabled,
.btn:disabled {
  opacity: 0.5 !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  font-family: 'Manrope', sans-serif !important;
}
.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* ── ANSWER BUTTONS (quiz) ─────────────────────────────────────── */
.answer-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: 'Manrope', sans-serif !important;
}
.answer-btn:hover {
  background: var(--cream) !important;
  border-color: var(--accent) !important;
  transform: none !important;          /* No slide */
}
.answer-btn.selected {
  background: rgba(46, 64, 87, 0.06) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* ── ALERTS ────────────────────────────────────────────────────── */
.alert.error {
  background: rgba(198, 93, 59, 0.08) !important;
  border-color: rgba(198, 93, 59, 0.25) !important;
  color: var(--challenger) !important;
}
.alert.success {
  background: rgba(90, 143, 111, 0.08) !important;
  border-color: rgba(90, 143, 111, 0.25) !important;
  color: var(--success) !important;
}
#childInfoError { color: var(--challenger) !important; }

/* ── LINKS ─────────────────────────────────────────────────────── */
a { color: inherit; }
.footer-link a,
.quiz-link strong,
.forgot-row a:hover {
  color: var(--accent) !important;
}
.forgot-row a { color: var(--text-dim) !important; }

/* ── DIVIDER ───────────────────────────────────────────────────── */
.divider::before,
.divider::after {
  background: var(--border) !important;
}
.divider { color: var(--text-muted) !important; }

/* ── QUIZ LINK ─────────────────────────────────────────────────── */
.quiz-link {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
.quiz-link:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* ── LOADING SPINNER ───────────────────────────────────────────── */
.loading-spinner {
  border-color: var(--border) !important;
  border-top-color: var(--accent) !important;
}

/* ── SKELETON LOADERS ──────────────────────────────────────────── */
.skeleton-box {
  background: var(--surface-3) !important;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }

/* ── REPORT BARS / SPECTRUM DOTS ───────────────────────────────── */
.spectrum-dot {
  box-shadow: none !important;          /* No glow */
  border-color: var(--bg) !important;
}
.bar-fill.green { background: var(--explorer) !important; }
.bar-fill.blue  { background: var(--builder) !important; }
.bar-fill.purple { background: var(--thinker) !important; }

/* ── PAYWALL / LOCK SECTION ────────────────────────────────────── */
.paywall-gate,
.locked-content,
.lock-section {
  background: var(--cream) !important;
  border-color: var(--taupe) !important;
}

/* ── TRAIT TAGS / PILLS ────────────────────────────────────────── */
.trait-tag {
  background: rgba(46, 64, 87, 0.07) !important;
  color: var(--text-dim) !important;
  border-radius: 6px !important;
}

/* ── NAV TILES (dashboard) ─────────────────────────────────────── */
.nav-tile {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.nav-tile:hover {
  background: var(--cream) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
}
.nav-tile-label { color: var(--text) !important; }
.nav-tile-sub { color: var(--text-dim) !important; }

/* ── CHAT INTERFACE ────────────────────────────────────────────── */
.chat-wrap,
.input-wrap {
  background: var(--bg) !important;
}
.input-wrap {
  border-top-color: var(--border) !important;
  background: rgba(247, 245, 242, 0.97) !important;
}
.input-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.input-box:focus-within {
  border-color: var(--accent-secondary) !important;
}
.starter-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
.starter-btn:hover {
  background: var(--cream) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.msg-row.bot .msg-bubble {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.msg-row.user .msg-bubble {
  background: var(--user-bg) !important;
  border-color: var(--user-border) !important;
  color: var(--text) !important;
}
.msg-avatar.bot {
  background: rgba(46, 64, 87, 0.1) !important;
  color: var(--accent) !important;
}
.msg-avatar.user-av {
  background: var(--user-bg) !important;
  color: var(--accent-secondary) !important;
  border-color: var(--user-border) !important;
}
.msg-bubble strong { color: var(--text) !important; }
.msg-bubble em { color: var(--text-dim) !important; }
.msg-bubble .section-header { color: var(--accent) !important; }
.typing-dot { background: var(--text-muted) !important; }
.typing-bubble {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ── SCROLLBARS ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg) !important; }
::-webkit-scrollbar-thumb { background: var(--border) !important; border-radius: 3px; }

/* ── FOOTER ────────────────────────────────────────────────────── */
footer {
  border-top-color: var(--border) !important;
}
footer p { color: var(--text-dim) !important; }

/* ── REPORT PAGE SPECIFIC ──────────────────────────────────────── */
.report-header {
  border-bottom-color: var(--border) !important;
}
.report-row { border-bottom-color: var(--border) !important; }
.report-label { color: var(--text-dim) !important; }
.feature-list li::before { color: var(--accent) !important; }
.feature-list li {
  border-bottom-color: var(--border) !important;
}
.diagnostic-item {
  background: var(--surface) !important;
}

/* ── DESCRIPTION BAND ──────────────────────────────────────────── */
.description-band {
  background: var(--cream) !important;
  border-color: var(--taupe) !important;
}

/* ── HOW STEPS ─────────────────────────────────────────────────── */
.step {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.step-number {
  color: var(--border) !important;
  -webkit-text-stroke-color: var(--border) !important;
}

/* ── REPORT STATUS BADGE ───────────────────────────────────────── */
.report-status {
  background: rgba(90, 143, 111, 0.1) !important;
  color: var(--success) !important;
}

/* ── CLOSING SECTION ───────────────────────────────────────────── */
.closing-sub { color: var(--text-dim) !important; }

/* ── NO-PROFILE NOTICE ─────────────────────────────────────────── */
.no-profile-notice {
  background: rgba(46, 64, 87, 0.05) !important;
  border-color: rgba(46, 64, 87, 0.15) !important;
  color: var(--text-dim) !important;
}
.no-profile-notice a { color: var(--accent) !important; }

/* ── BADGE ─────────────────────────────────────────────────────── */
.badge-soon {
  background: rgba(107, 107, 107, 0.1) !important;
  color: var(--text-dim) !important;
}

/* ── ARCHETYPE CARD (dashboard) ────────────────────────────────── */
.archetype-description { color: var(--text) !important; }

/* ── INTRO META NUMBERS (quiz) ─────────────────────────────────── */
.intro-meta-item .num { color: var(--accent) !important; }
.intro-meta-item .label { color: var(--text-dim) !important; }

/* ── PROBLEM SECTION (landing) ─────────────────────────────────── */
.problem-details p { color: var(--text-dim) !important; }
.problem-statement em { color: var(--accent) !important; font-style: normal !important; }

/* ── HERO ──────────────────────────────────────────────────────── */
.hero-sub,
.hero-subtitle,
.hero-tagline { color: var(--text-dim) !important; }
.hero h1 em,
.intro-screen h1 em { color: var(--accent) !important; font-style: normal !important; }
.hero-archetype-name { /* keep archetype color from inline */ }

/* ── HERO LABEL ACCENT LINE ────────────────────────────────────── */
.hero-label::before,
.intro-label::before {
  background: var(--accent-secondary) !important;
}

/* ── CLOSING TITLE / SECTION TITLE ────────────────────────────── */
.section-title em,
.empty-title em { color: var(--accent) !important; font-style: normal !important; }

/* ── REPORT SECTION: DIVIDER LINES ────────────────────────────── */
.section { border-top-color: var(--border) !important; }
.report-bar { border-top-color: var(--border) !important; }
.bar-track { background: #E3E0DB !important; }
.spectrum-track { background: #E3E0DB !important; }
.spectrum-track::before { background: var(--border) !important; }
.report-row { border-bottom-color: var(--border-dim) !important; }

/* ── PROBLEM SECTION BORDERS ───────────────────────────────────── */
.problem,
.archetypes,
.how,
.report-section,
.closing { border-top-color: var(--border) !important; }

/* ── INLINE STEP LINK COLOR ────────────────────────────────────── */
.step a { color: var(--accent) !important; }

/* ── REPORT FEATURES ───────────────────────────────────────────── */
.report-features h3 { color: var(--text) !important; }
.report-features p { color: var(--text-dim) !important; }
.report-header-title { color: var(--text) !important; }

/* ── AGE BANDS (landing) ──────────────────────────────────────── */
.age-bands,
.emergers { border-top-color: var(--border) !important; }
.age-band-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.age-band-card:hover { border-color: var(--accent) !important; }
.age-band-new { border-color: var(--accent-secondary) !important; }
.age-band-range { color: var(--text) !important; }
.age-band-name { color: var(--accent-secondary) !important; }
.age-band-desc { color: var(--text-dim) !important; }
.age-band-cta { color: var(--accent) !important; }
.age-band-note { color: var(--text-dim) !important; }
.emerger-intro p { color: var(--text-dim) !important; }
.emerger-intro strong { color: var(--text) !important; }