/* ==========================================================================
   CASEPREP DESIGN SYSTEM
   One stylesheet, every page. Change a token here, the whole site moves.

   Load on every page, before the page's own <style>:
     <link rel="stylesheet" href="/caseprep.css">

   COLOR LOGIC (inherited from the product itself)
     brass  — the case: strength, brand, primary action
     iq     — analysis: what CasePrep IQ found
     print  — production: exhibits, the print pipeline
     ok / warn / crit — state

   Light is the base palette. Dark redefines tokens only, never rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* surfaces + ink */
  --cp-ground:     #F2F5F8;
  --cp-surface:    #FFFFFF;
  --cp-sunk:       #E7EDF2;
  --cp-raise:      rgba(18, 24, 33, .03);
  --cp-ink:        #121821;
  --cp-body:       #2C3743;
  --cp-muted:      #5C6879;
  --cp-faint:      #8996A8;
  --cp-rule:       #CFD8E1;
  --cp-rule-soft:  #E1E8EE;

  /* brass — the case, the brand, primary action */
  --cp-brass:      #8F6412;
  --cp-brass-hi:   #A97A22;
  --cp-brass-bg:   #F7F1E2;
  --cp-brass-line: #E0CFA4;
  --cp-on-brass:   #FFFFFF;   /* text that sits on a filled brass surface */

  /* iq — analysis */
  --cp-iq:         #4F43AD;
  --cp-iq-bg:      #EEECFB;
  --cp-iq-line:    #C9C2F0;

  /* print — production */
  --cp-print:      #15637F;
  --cp-print-bg:   #E5F1F7;
  --cp-print-line: #B3D6E6;

  /* state */
  --cp-ok:         #2B6642;
  --cp-ok-bg:      #E6F2EA;
  --cp-ok-line:    #B6D7C2;
  --cp-warn:       #82590F;
  --cp-warn-bg:    #FAF0DC;
  --cp-warn-line:  #E8CF9E;
  --cp-crit:       #A1372A;
  --cp-crit-bg:    #FBEAE7;
  --cp-crit-line:  #EEC3BB;

  /* ink field — the inverted band, always dark in both themes */
  --cp-field:      #16202B;
  --cp-on-field:   #EEF2F7;
  --cp-on-field-dim: #A9B9CD;

  --cp-shadow:     0 1px 2px rgba(18,24,33,.05), 0 10px 30px -16px rgba(18,24,33,.20);
  --cp-shadow-lg:  0 2px 4px rgba(18,24,33,.06), 0 18px 44px -18px rgba(18,24,33,.22);

  /* type */
  --cp-serif: "Spectral", Georgia, "Times New Roman", serif;
  --cp-sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --cp-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* measure + rhythm */
  --cp-measure:   67ch;
  --cp-wrap:      1060px;
  --cp-gutter:    24px;
  --cp-section:   76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-ground:     #0A0D14;
    --cp-surface:    #111725;
    --cp-sunk:       #0E131C;
    --cp-raise:      rgba(255, 255, 255, .03);
    --cp-ink:        #EEF1F6;
    --cp-body:       #C3CCD8;
    --cp-muted:      #8996A8;
    --cp-faint:      #6A7488;
    --cp-rule:       #262F42;
    --cp-rule-soft:  #1C2434;

    --cp-brass:      #C8A25B;
    --cp-brass-hi:   #DCC188;
    --cp-brass-bg:   #241D0F;
    --cp-brass-line: #4D3F21;
    --cp-on-brass:   #16110A;

    --cp-iq:         #8B7FF0;
    --cp-iq-bg:      #191634;
    --cp-iq-line:    #332C62;

    --cp-print:      #49A8CF;
    --cp-print-bg:   #0D1E28;
    --cp-print-line: #1E4256;

    --cp-ok:         #5FA87C;
    --cp-ok-bg:      #0F2117;
    --cp-ok-line:    #22452F;
    --cp-warn:       #CF9B46;
    --cp-warn-bg:    #261C0C;
    --cp-warn-line:  #4E3A19;
    --cp-crit:       #D1604F;
    --cp-crit-bg:    #2A1310;
    --cp-crit-line:  #57281F;

    --cp-field:      #070A11;
    --cp-on-field:   #EEF1F6;
    --cp-on-field-dim: #93A3B8;

    --cp-shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.7);
    --cp-shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 22px 52px -20px rgba(0,0,0,.75);
  }
}

:root[data-theme="dark"] {
  --cp-ground:     #0A0D14;
  --cp-surface:    #111725;
  --cp-sunk:       #0E131C;
  --cp-raise:      rgba(255, 255, 255, .03);
  --cp-ink:        #EEF1F6;
  --cp-body:       #C3CCD8;
  --cp-muted:      #8996A8;
  --cp-faint:      #6A7488;
  --cp-rule:       #262F42;
  --cp-rule-soft:  #1C2434;

  --cp-brass:      #C8A25B;
  --cp-brass-hi:   #DCC188;
  --cp-brass-bg:   #241D0F;
  --cp-brass-line: #4D3F21;
  --cp-on-brass:   #16110A;

  --cp-iq:         #8B7FF0;
  --cp-iq-bg:      #191634;
  --cp-iq-line:    #332C62;

  --cp-print:      #49A8CF;
  --cp-print-bg:   #0D1E28;
  --cp-print-line: #1E4256;

  --cp-ok:         #5FA87C;
  --cp-ok-bg:      #0F2117;
  --cp-ok-line:    #22452F;
  --cp-warn:       #CF9B46;
  --cp-warn-bg:    #261C0C;
  --cp-warn-line:  #4E3A19;
  --cp-crit:       #D1604F;
  --cp-crit-bg:    #2A1310;
  --cp-crit-line:  #57281F;

  --cp-field:      #070A11;
  --cp-on-field:   #EEF1F6;
  --cp-on-field-dim: #93A3B8;

  --cp-shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.7);
  --cp-shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 22px 52px -20px rgba(0,0,0,.75);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cp-ground);
  color: var(--cp-body);
  font-family: var(--cp-sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--cp-ink); text-wrap: balance; margin: 0; }

h1 {
  font-family: var(--cp-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.6vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

h2 {
  font-family: var(--cp-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -.014em;
}

h3 {
  font-family: var(--cp-sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.005em;
}

p { margin: 0 0 17px; max-width: var(--cp-measure); }
p:last-child { margin-bottom: 0; }
strong { color: var(--cp-ink); font-weight: 600; }
em { font-style: italic; }

a { color: var(--cp-brass); text-underline-offset: 3px; }

::selection { background: var(--cp-brass-bg); color: var(--cp-ink); }
:focus-visible { outline: 2px solid var(--cp-brass); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.cp-wrap   { max-width: var(--cp-wrap); margin: 0 auto; padding: 0 var(--cp-gutter); }
.cp-narrow { max-width: 720px; }
.cp-mono   { font-family: var(--cp-mono); }

.cp-section { padding: var(--cp-section) 0; }
.cp-section + .cp-section { border-top: 1px solid var(--cp-rule); }

/* recessed band, for figures and stat rows */
.cp-band {
  background: var(--cp-sunk);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
  padding: 46px 0;
}

/* inverted band — stays dark in both themes, for candor / limits sections */
.cp-field { background: var(--cp-field); color: var(--cp-on-field-dim); padding: var(--cp-section) 0; }
.cp-field h1, .cp-field h2, .cp-field h3, .cp-field strong { color: var(--cp-on-field); }
.cp-field .cp-eyebrow { color: var(--cp-on-field-dim); }

/* --------------------------------------------------------------------------
   4. BRAND MARK
   -------------------------------------------------------------------------- */

.cp-mark {
  display: inline-block;
  font-family: var(--cp-serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--cp-ink);
  text-decoration: none;
}
.cp-mark span { color: var(--cp-brass); }
.cp-mark em { font-style: italic; color: var(--cp-brass); }
.cp-mark small {
  display: block;
  font-family: var(--cp-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   5. TOP BAR — identical on every marketing + reference page
   -------------------------------------------------------------------------- */

.cp-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-rule);
}
.cp-topbar .cp-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.cp-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--cp-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cp-nav a { color: var(--cp-muted); text-decoration: none; white-space: nowrap; transition: color .13s; }
.cp-nav a:hover { color: var(--cp-brass); }
.cp-nav a[aria-current="page"] { color: var(--cp-ink); }

/* announcement strip above the bar — e.g. "Prepared for ..." */
.cp-strip {
  background: var(--cp-field);
  color: var(--cp-on-field-dim);
  font-family: var(--cp-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.cp-strip b { color: var(--cp-brass-hi); font-weight: 500; }

/* the top bar drops its text links on small screens; each page's own
   in-page anchors are reachable by scrolling, as they were before */
@media (max-width: 860px) {
  .cp-nav a:not(.cp-btn) { display: none; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cp-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--cp-brass);
  background: var(--cp-brass);
  color: var(--cp-on-brass);
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap;
}
.cp-btn:hover { background: var(--cp-brass-hi); border-color: var(--cp-brass-hi); color: var(--cp-on-brass); }

/* the nav's own link colour must not win over a button sitting inside it */
.cp-nav a.cp-btn { color: var(--cp-on-brass); }
.cp-nav a.cp-btn:hover { color: var(--cp-on-brass); }

.cp-btn--ghost,
.cp-nav a.cp-btn--ghost { background: transparent; color: var(--cp-ink); border-color: var(--cp-rule); }
.cp-btn--ghost:hover,
.cp-nav a.cp-btn--ghost:hover { background: var(--cp-brass-bg); color: var(--cp-brass); border-color: var(--cp-brass); }

.cp-btn--sm { padding: 8px 15px; font-size: .68rem; }

/* the dark field keeps a light ghost outline whatever the page theme */
.cp-field .cp-btn--ghost { color: var(--cp-on-field); border-color: rgba(169,185,205,.32); background: transparent; }
.cp-field .cp-btn--ghost:hover { border-color: var(--cp-brass); color: var(--cp-brass-hi); background: transparent; }

.cp-cta-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* --------------------------------------------------------------------------
   8. EYEBROW / KICKER
   -------------------------------------------------------------------------- */

.cp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cp-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin: 0 0 16px;
  max-width: none;
}
.cp-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cp-brass); flex: none; }

/* --------------------------------------------------------------------------
   9. SECTION HEAD
   -------------------------------------------------------------------------- */

.cp-head { max-width: 660px; margin-bottom: 34px; }
.cp-head h2 { margin-bottom: 14px; max-width: 24ch; }
.cp-lede { color: var(--cp-body); font-size: 1.02rem; max-width: var(--cp-measure); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. TAGS / PILLS
   -------------------------------------------------------------------------- */

.cp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--cp-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  color: var(--cp-muted);
  background: var(--cp-raise);
  border-color: var(--cp-rule);
}
.cp-tag--brass { color: var(--cp-brass); background: var(--cp-brass-bg); border-color: var(--cp-brass-line); }
.cp-tag--iq    { color: var(--cp-iq);    background: var(--cp-iq-bg);    border-color: var(--cp-iq-line); }
.cp-tag--print { color: var(--cp-print); background: var(--cp-print-bg); border-color: var(--cp-print-line); }
.cp-tag--ok    { color: var(--cp-ok);    background: var(--cp-ok-bg);    border-color: var(--cp-ok-line); }
.cp-tag--warn  { color: var(--cp-warn);  background: var(--cp-warn-bg);  border-color: var(--cp-warn-line); }
.cp-tag--crit  { color: var(--cp-crit);  background: var(--cp-crit-bg);  border-color: var(--cp-crit-line); }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */

.cp-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-rule);
  border-radius: 10px;
  padding: 24px 26px;
  box-shadow: var(--cp-shadow);
}
.cp-card--accent { border-left: 3px solid var(--cp-brass); }
.cp-card h3 { margin-bottom: 7px; }
.cp-card p { font-size: .95rem; }

/* hairline grid — cards sharing borders, no gaps */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--cp-rule);
  border: 1px solid var(--cp-rule);
}
.cp-grid > * { background: var(--cp-surface); padding: 25px 26px 27px; }

/* --------------------------------------------------------------------------
   12. NUMBERED STEPS
   -------------------------------------------------------------------------- */

.cp-steps { display: grid; gap: 0; counter-reset: cpstep; }
.cp-step {
  counter-increment: cpstep;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--cp-rule-soft);
}
.cp-step:first-child { border-top: 1px solid var(--cp-rule); }
.cp-step:last-child  { border-bottom: 1px solid var(--cp-rule); }
.cp-step::before {
  content: counter(cpstep, decimal-leading-zero);
  font-family: var(--cp-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--cp-brass);
  padding-top: 3px;
}
.cp-step p { font-size: .95rem; margin: 5px 0 0; max-width: 63ch; color: var(--cp-body); }

/* --------------------------------------------------------------------------
   13. FIGURE ROW — big numbers
   -------------------------------------------------------------------------- */

.cp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.cp-fig-n {
  display: block;
  font-family: var(--cp-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cp-brass);
  margin-bottom: 9px;
}
.cp-fig-l { display: block; font-size: .88rem; color: var(--cp-muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */

.cp-cta {
  padding: var(--cp-section) 0;
  text-align: center;
  border-top: 1px solid var(--cp-rule);
  background: var(--cp-sunk);
}
.cp-cta h2 { margin-bottom: 15px; max-width: none; }
.cp-cta p { font-size: 1.02rem; max-width: 560px; margin: 0 auto 28px; }
.cp-cta .cp-cta-row { justify-content: center; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */

.cp-footer {
  border-top: 1px solid var(--cp-rule);
  background: var(--cp-surface);
  padding: 44px 0 54px;
}
.cp-footer .cp-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
.cp-foot-brand { display: flex; flex-direction: column; gap: 9px; }
.cp-foot-contact {
  font-family: var(--cp-mono);
  font-size: .74rem;
  line-height: 2;
  color: var(--cp-muted);
}
.cp-foot-contact a { color: var(--cp-body); text-decoration: none; }
.cp-foot-contact a:hover { color: var(--cp-brass); }
.cp-foot-note {
  font-size: .76rem;
  line-height: 1.7;
  color: var(--cp-muted);
  max-width: 56ch;
  margin: 0;
}
.cp-foot-note a { color: var(--cp-muted); }
.cp-foot-note a:hover { color: var(--cp-brass); }
.cp-foot-legal {
  font-family: var(--cp-mono);
  font-size: .66rem;
  color: var(--cp-muted);
  align-self: flex-end;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. REVEAL — shared scroll-in
   -------------------------------------------------------------------------- */

.cp-reveal { opacity: 0; transform: translateY(13px); transition: opacity .55s ease, transform .55s ease; }
.cp-reveal.cp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cp-reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --cp-section: 54px; --cp-gutter: 18px; }
  body { font-size: 16px; }
  .cp-step { grid-template-columns: 40px 1fr; gap: 14px; }
  .cp-card { padding: 20px 20px; }
  .cp-footer .cp-wrap { gap: 22px; }
  .cp-foot-legal { align-self: flex-start; }
}