/* needapc app theme — aligns the Pico-based inner pages (questionnaire,
   results, compare) with the landing page's palette and typography.

   Loaded after pico.min.css in base.html. Pico is entirely CSS-variable
   driven, so remapping its --pico-* tokens here recolours every Pico
   component (buttons, forms, cards, tables) app-wide. The selectors mirror
   Pico's own theme selectors ([data-theme=dark] / [data-theme=light]) so, at
   equal specificity, our later source order wins.

   Palette + fonts are the same values used inline on the landing (home.html /
   landing.css): accent #8AA0EA, Space Grotesk display font, dark #0e1117 /
   #12151c surfaces. */

:root {
  --np-accent: #8AA0EA;
  --np-accent-hover: #9DB0EE;
  --np-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --np-body: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- Typography (element-level so it beats Pico's :where() font rules) ---- */

body {
  font-family: var(--np-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--np-display);
  letter-spacing: -0.015em;
}

/* ---- Accent + shared tokens (applied in both themes) ---- */

:root:not([data-theme="dark"]),
[data-theme="light"],
[data-theme="dark"] {
  --pico-primary: var(--np-accent);
  --pico-primary-background: var(--np-accent);
  --pico-primary-hover: var(--np-accent-hover);
  --pico-primary-hover-background: var(--np-accent-hover);
  --pico-primary-focus: color-mix(in srgb, var(--np-accent) 40%, transparent);
  --pico-primary-border: var(--np-accent);
  --pico-primary-underline: color-mix(in srgb, var(--np-accent) 45%, transparent);
  --pico-primary-inverse: #111726;
  --pico-border-radius: 0.7rem;
}

/* ---- Dark (default) — needapc palette, exact landing values ---- */

[data-theme="dark"] {
  color-scheme: dark;
  --pico-background-color: #0e1117;
  --pico-color: #e6e9f0;
  --pico-h1-color: #f1f3f8;
  --pico-h2-color: #f1f3f8;
  --pico-h3-color: #f1f3f8;
  --pico-h4-color: #eceff6;
  --pico-h5-color: #e6e9f0;
  --pico-h6-color: #e6e9f0;
  --pico-muted-color: #9aa3b4;
  --pico-muted-border-color: #242a34;
  --pico-border-color: #242a34;
  --pico-card-background-color: #12151c;
  --pico-card-sectioning-background-color: #12151c;
  --pico-card-section-background-color: #12151c;
  --pico-card-border-color: #242a34;
  --pico-form-element-background-color: #0b0e14;
  --pico-form-element-border-color: #2b3547;
  --pico-form-element-active-background-color: #0b0e14;
  --pico-form-element-active-border-color: var(--np-accent);
  --pico-form-element-focus-color: var(--np-accent);
  --pico-form-element-placeholder-color: #6b7488;
  --pico-table-border-color: #242a34;
  --pico-table-row-stripped-background-color: #12151c;
  --pico-range-border-color: #1d2432;
  --pico-range-active-border-color: #2b3547;
  --pico-range-thumb-color: #f1f3f8;
  --pico-secondary: #9aa3b4;
  --pico-secondary-hover: #e6e9f0;
  --pico-secondary-focus: color-mix(in srgb, #9aa3b4 30%, transparent);
  --pico-code-background-color: #12151c;
  --pico-code-color: #cdd6e4;
  --pico-blockquote-border-color: #242a34;
}

/* ---- Light — coherent variant using the same accent + display font ---- */

:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-background-color: #f6f7fb;
  --pico-color: #2b303b;
  --pico-h1-color: #14171f;
  --pico-h2-color: #14171f;
  --pico-h3-color: #14171f;
  --pico-h4-color: #1b1f28;
  --pico-h5-color: #232833;
  --pico-h6-color: #232833;
  --pico-muted-color: #5c6472;
  --pico-muted-border-color: #dfe3ec;
  --pico-border-color: #dfe3ec;
  --pico-card-background-color: #ffffff;
  --pico-card-sectioning-background-color: #ffffff;
  --pico-card-section-background-color: #ffffff;
  --pico-card-border-color: #e3e7f0;
  --pico-form-element-background-color: #ffffff;
  --pico-form-element-border-color: #cfd5e0;
  --pico-table-row-stripped-background-color: #eef1f7;
}

/* ---- Site header / branding (matches the landing's needapc wordmark) ---- */

.np-brand {
  font-family: var(--np-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--pico-h1-color);
  text-decoration: none;
}

.np-brand:hover,
.np-brand:focus-visible {
  color: var(--pico-h1-color);
}

.np-brand-dot {
  color: var(--np-accent);
}

.np-navlink {
  color: var(--pico-muted-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.np-navlink:hover,
.np-navlink:focus-visible {
  color: var(--pico-color);
}

/* ---- Legal / prose pages (privacy notice) ---- */

.np-legal {
  max-width: 46rem;
}

.np-legal h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

.np-legal p,
.np-legal li {
  color: var(--pico-color);
  line-height: 1.65;
}

/* ---- Site footer ---- */

.np-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

.np-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

.np-footer .np-brand {
  font-size: 1rem;
}

.np-footer-sep {
  margin: 0 0.5rem;
  color: var(--pico-muted-color);
}

.np-footer-link {
  color: var(--pico-muted-color);
  text-decoration: none;
}

.np-footer-link:hover,
.np-footer-link:focus-visible {
  color: var(--pico-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}