/* ============================================================================
   AuditSpark — "Quiet Teal" shared design system
   ----------------------------------------------------------------------------
   Single source of truth for tokens + the components that recur on every page
   (utility ribbon, header/nav, eyebrow, section scaffolding, buttons, footer,
   chips, AI panel, card, input). Pages link this with:

       <link rel="stylesheet" href="/styles/auditspark.css">

   placed in <head> BEFORE the page's own inline <style> so page-specific rules
   can still override these shared ones.

   Type: Hanken Grotesk everywhere EXCEPT the dark utility ribbon, which keeps
   its original Space Mono. Brand teals (#18505b / #2e93a7) carry over from the
   old "field-notes" system; everything warm/serif is dropped.
   ============================================================================ */

/* ── Tokens ──────────────────────────────────────────────────────────────
   Names are preserved from the old palette because JS-injected inline styles
   reference them (e.g. var(--teal,#0e2c33), var(--border,#e1dccf),
   var(--bg-2,#fff), var(--muted,#777), var(--amber)). Only the VALUES change,
   so the new palette auto-propagates into runtime-built markup. --teal and
   --muted are newly defined so those inline fallbacks resolve to brand colors
   instead of the old dark/grey defaults. */
:root {
  --bg:          #ffffff;                 /* primary surface (was warm #FBFAF6) */
  --bg-1:        #ffffff;                 /* cards */
  --bg-2:        #f4f8f9;                 /* cool tinted surface (was #F4F1E8) */
  --bg-3:        #eaf1f3;                 /* cool tint, hover/tertiary (was #ECE7DA) */
  --border:      #e7eef0;                 /* cool line (was warm tan #e1dccf) */
  --border-2:    #d4e0e3;                 /* strong line (was #cfc8b6) */
  --accent:      #2e93a7;                 /* secondary teal (br2) — keep */
  --accent-dim:  rgba(46,147,167,.10);
  --purple:      #2e93a7;                 /* legacy alias → accent teal */
  --purple-lt:   #4fa6ba;                 /* lighter teal (incidental gradients) */
  --violet:      #18505b;                 /* primary deep teal (brand) — keep */
  --green:       #2e93a7;
  --champagne:   #c79a3c;                 /* now the spark gold (was #EBD7A2) */
  --gold:        #c79a3c;                 /* warm "spark" accent */
  --deep-teal:   #18505b;
  --teal:        #18505b;                 /* NEW — resolves injected var(--teal,#0e2c33) */
  --amber:       #c79a3c;                 /* aligned to spark gold (verdict <em>) */
  --orange:      #d07a2a;
  --red:         #c0492f;
  --cyan:        #2e93a7;
  --text:        #102d34;                 /* ink (was #1c2b2f) */
  --text-2:      #2b4248;                 /* cool dark */
  --text-muted:  #5d7378;                 /* muted (was #5a6a6e) */
  --muted:       #5d7378;                 /* NEW — resolves injected var(--muted,#777) */
  --text-dim:    #9aabae;                 /* tertiary / legal (was #8B8378) */
  --radius:      14px;
  --shadow:         0 18px 34px -28px rgba(18,46,52,.5);   /* report/card */
  --shadow-input:   0 10px 24px -18px rgba(18,46,52,.5);   /* hero url bar */
  --shadow-feature: 0 20px 38px -28px rgba(18,80,91,.6);   /* featured pricing */

  /* Field-notes / learn token vocabulary → mapped to Quiet Teal, so marketing
     and learn pages recolor automatically when they drop their own :root.
     ⚠ --serif intentionally maps to Hanken Grotesk (the serif look is dropped);
     --mono stays Space Mono (the kept dark ribbon + kickers). */
  --teal-900:    #0e2c33;
  --teal-700:    #18505b;
  --teal-500:    #2e93a7;
  --teal-300:    #7fb6c0;
  --gold-300:    #c79a3c;
  --gold-line:   #e4ce97;
  --gold-deep:   #b8923c;
  --paper:       #ffffff;
  --paper-2:     #f4f8f9;
  --paper-3:     #eaf1f3;
  --ink:         #102d34;
  --ink-soft:    #5d7378;
  --line:        #e7eef0;
  --line-strong: #d4e0e3;
  --pk-purple:   #a259e6;
  --pk-green:    #7cc11a;
  --pk-plum:     #1c0a2b;
  --serif:       'Hanken Grotesk', sans-serif;
  --sans:        'Hanken Grotesk', sans-serif;
  --mono:        'Space Mono', monospace;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: -.02em;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }

/* Skip-to-content (keyboard a11y) */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 300; background: var(--violet); color: #fff;
  padding: .65rem 1.4rem; border-radius: 0 0 8px 8px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .9rem; font-weight: 600;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Utility ribbon (kept; dark, Space Mono) ───────────────────────────────
   The one intentional carry-over from the old identity. Stays dark teal and
   monospace; only the link accent shifts to the new spark gold. */
.util-bar { background: #0e2c33; color: #bcd6da; }
.util-bar .util-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 44px;
  display: flex; align-items: center; gap: 10px; height: 36px;
  font-family: 'Space Mono', monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.util-bar .util-sep { opacity: .4; }
.util-bar a { color: var(--gold); margin-left: auto; text-decoration: none; transition: opacity .15s; white-space: nowrap; }
.util-bar a:hover { opacity: .8; }
@media (max-width: 600px) { .util-tagline { display: none; } }

/* ── Header (sticky, white) ────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header .nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 44px;
  display: flex; align-items: center; gap: 30px; height: 72px;
}
.logo { display: flex; align-items: center; text-decoration: none; color: var(--text); }
.site-logo-img { height: 44px; width: auto; display: block; }
.nav-spacer { flex: 1; }

.top-nav { display: flex; align-items: center; gap: 28px; }
.top-nav a {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  transition: color .15s ease;
}
.top-nav a:hover { color: var(--violet); }
@media (max-width: 820px) { .top-nav { display: none; } }

.btn-signin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; background: var(--violet); color: #fff;
  border: none; border-radius: 2px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; font-family: 'Hanken Grotesk', sans-serif;
  transition: background .16s ease; white-space: nowrap;
}
.btn-signin:hover { background: #0e2c33; }

/* ── Eyebrow (signature device: gold spark dot + teal uppercase) ───────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .spark { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ── Section scaffolding (clean grotesk headings, no serif/no Space Mono) ──── */
.section { position: relative; z-index: 1; padding: 5rem 2rem; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.section-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.14; letter-spacing: -.02em; text-align: center;
  margin-bottom: 1rem; color: var(--text);
}
.section-title em { font-style: normal; color: var(--accent); }
.section-sub {
  text-align: center; color: var(--text-muted); font-size: 1.05rem;
  max-width: 560px; margin: 0 auto 3rem; line-height: 1.6;
  font-family: 'Hanken Grotesk', sans-serif;
}

/* ── Buttons (reference system) ────────────────────────────────────────────── */
.btn {
  border: none; cursor: pointer;
  background: var(--violet); color: #fff;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-radius: 11px; white-space: nowrap;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: #123e47; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: #fff; color: var(--violet); border: 1px solid var(--violet); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-block { width: 100%; padding: 11px; }
/* Marketing/learn button variants (markup uses `btn btn-primary` / `btn btn-out`) */
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: #0e2c33; }
.btn-out { background: transparent; color: var(--violet); border: 1px solid var(--border-2); }
.btn-out:hover { border-color: var(--violet); background: #fff; }

/* ── Field-notes shell (marketing + learn pages: header.site / .util / .nav) ───
   These pages use a different chrome vocabulary than index.html. Defined here so
   each page can drop its inline copies and stay consistent. */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 44px; }
.mono { font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.rule { height: 1px; background: var(--line); border: 0; }
.util { background: #0e2c33; color: #bcd6da; }
.util .wrap { display: flex; align-items: center; gap: 10px; height: 36px; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.util .dotsep { opacity: .4; }
.util a { color: var(--gold); margin-left: auto; white-space: nowrap; transition: opacity .15s; }
.util a:hover { opacity: .8; }
@media (max-width: 600px) { .util-tagline { display: none; } }
header.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 30px; height: 72px; }
.nav .logo { height: 44px; width: auto; display: block; }
.nav .spacer { flex: 1; }
.nav .links { display: flex; gap: 28px; font-weight: 600; font-size: 14.5px; color: var(--ink-soft); }
.nav .links a:hover, .nav .links a.active { color: var(--teal-700); }
.nav .links a.active { position: relative; }
.nav .links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px; background: var(--teal-700); }

/* ── AI / GEO panel (solid brand teal; reversed text) ──────────────────────── */
.ai { padding: 4rem 2rem; background: var(--violet); color: #fff; }
.ai .section-label, .ai .eyebrow { color: #9fd0da; }
.ai .section-title { color: #fff; }
.ai .section-sub { color: #cfe6eb; }

/* ── Chips (engine pills, etc.) ────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips span {
  font-size: 12.5px; font-weight: 500; color: #eaf6f8;
  padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22);
}

/* ── Generic card + input (used by marketing pages) ────────────────────────── */
.card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-shadow: var(--shadow);
}
.input {
  width: 100%; padding: .8rem 1rem;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 1rem; font-family: 'Hanken Grotesk', sans-serif;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46,147,167,.15); }
.input::placeholder { color: var(--text-dim); }

/* ── Footer (now light; was dark) ──────────────────────────────────────────── */
footer {
  position: relative; z-index: 1;
  background: var(--bg-2); color: var(--text-muted);
  padding: 48px 0 38px; border-top: 1px solid var(--border);
}
footer .foot-inner { max-width: 1100px; margin: 0 auto; padding: 0 44px; }
footer .foot-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
footer .foot-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
footer .foot-brand img { height: 20px; width: 20px; }
footer .foot-brand strong { color: var(--text); margin-left: 3px; }
footer .foot-spacer { flex: 1; }
footer .foot-links { display: flex; gap: 24px; font-size: 13.5px; flex-wrap: wrap; }
footer .foot-links a { color: var(--text-muted); text-decoration: none; transition: color .15s; }
footer .foot-links a:hover { color: var(--violet); }
footer .foot-copy {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 11.5px;
  letter-spacing: .02em; color: var(--text-dim);
  margin-top: 26px; border-top: 1px solid var(--border); padding-top: 22px;
}
@media (max-width: 640px) { footer .foot-inner { padding: 0 26px; } }
