/* tokens.css — shared RTK design system (canonical: Email Analyzer) */
/* ─────────────────────────────────────────────────────────────────────────
   RTK design tokens — the single source of truth for every RTK property.

   Canonical property: Email Analyzer (analyzer.rtkllc.men).
   Everything here is copied from its "case-file" palette so the landing page,
   Shorty and any future project share one visual language rather than three
   near-misses.

   Rules this file encodes:
     · ink on cool paper — deliberately not cream (#F4F1EA), not slate SaaS grey
     · one accent pair: postmark red (attention) + seal green (verified/brand)
     · near-square corners (0.125rem) — paper, not SaaS bubbles
     · no drop shadows anywhere; separation is done with hairline borders
     · display type is a serif (Spectral); UI is IBM Plex Sans; mono ONLY for
       real machine data (domains, IDs, headers, hashes)

   Dark is the default state: <html class="dark">. Light is the opt-out.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* colours — light ("archive, daylight") */
  --paper: #EDEEE9;
  --ink: #14181A;
  --postmark: #A8322A;
  --seal: #2F5D50;

  --primary: #2F5D50;
  --primary-dark: #234A3F;
  --primary-light: #E4EDE9;
  --accent: #A8322A;
  --accent-light: #F5E7E5;
  --bg: #EDEEE9;
  --surface: #F7F8F5;
  --text: #14181A;
  --text-secondary: #5B6360;
  --border: #C9CCC5;
  --border-light: #DFE2DB;
  --red: #A8322A;
  --red-light: #F5E7E5;
  --orange: #8A6A12;
  --orange-light: #F3EAD2;
  --hover: #E3E6DF;
  --divider: #DFE2DB;
  --card-shadow: none;

  /* compatibility aliases — Shorty's older token names map onto the same values
     so its templates keep working while it moves onto the shared system */
  --surface2: var(--surface);
  --border2: var(--border);
  --muted: var(--text-secondary);
  --muted2: var(--text-secondary);
  --accent-hover: var(--primary-dark);
  --on-accent: #FFFFFF;

  /* type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: clamp(1.75rem, 3.2vw, 2.25rem);
  --step-4: clamp(2.1rem, 5.2vw, 3.25rem);

  /* space + shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 0.125rem;
  --radius-pill: 999px;
  --measure: 68ch;
  --wrap: 62rem;
}

.dark {
  /* colours — dark ("archive, at night"). This is the default state. */
  --paper: #15181A;
  --ink: #ECEFEA;
  --postmark: #C4544A;
  --seal: #5E9C87;

  --primary: #5E9C87;
  --primary-dark: #4A8270;
  --primary-light: #1F2B27;
  --accent: #C4544A;
  --accent-light: #2E2220;
  --bg: #15181A;
  --surface: #1C201F;
  --text: #ECEFEA;
  --text-secondary: #9AA39D;
  --border: #333A37;
  --border-light: #262B29;
  --red: #C4544A;
  --red-light: #2E2220;
  --orange: #C9A227;
  --orange-light: #2C2718;
  --hover: #242A27;
  --divider: #262B29;
  --card-shadow: none;

  --on-accent: #15181A;
}

/* ─────────────────────────────────────────────────────────────────────────
   RTK shared header + footer.
   Markup and measurements copied from the Email Analyzer's <header> and
   <footer> so every property has the same chrome, not just the same palette.

   Requires tokens.css (colours/type) and theme.js (the toggle).
   Usage:
     <header class="rtk-header">
       <div class="rtk-header-inner">
         <a class="rtk-brand" href="/">…mark…<span>Name</span></a>
         <span class="rtk-tagline">optional subtitle</span>
         <div class="rtk-actions">
           <nav class="rtk-nav"><a aria-current="page">…</a></nav>
           <a class="rtk-btn">Secondary</a>
           <a class="rtk-btn accent">Primary</a>
           <button class="rtk-theme" data-theme-toggle>…</button>
         </div>
       </div>
     </header>
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- header ---------- */
.rtk-header{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.rtk-header-inner{
  max-width:72rem;margin:0 auto;padding:0 1.5rem;
  height:3.5rem;display:flex;align-items:center;gap:.75rem;
}
.rtk-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text)}
.rtk-brand:hover{text-decoration:none}
.rtk-brand svg{height:26px;width:auto;display:block}
.rtk-brand span{font-family:var(--font-sans);font-weight:700;font-size:.875rem;letter-spacing:-.01em;color:var(--text)}
.rtk-tagline{font-size:.75rem;color:var(--text-secondary);margin-left:.25rem;white-space:nowrap}
.rtk-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}

.rtk-nav{display:flex;align-items:center;gap:.25rem}
.rtk-nav a{
  padding:.375rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;
}
.rtk-nav a:hover{background:var(--hover);color:var(--text);text-decoration:none}
.rtk-nav a[aria-current="page"]{background:var(--hover);color:var(--text)}

.rtk-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:500;
  background:var(--hover);color:var(--text);border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;min-height:32px;
}
.rtk-btn:hover{text-decoration:none;opacity:.9}
.rtk-btn.accent{background:var(--accent);color:#fff}

.rtk-theme{
  width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;
  background:var(--hover);border:0;border-radius:.5rem;color:var(--text);cursor:pointer;padding:0;
}
.rtk-theme svg{width:1rem;height:1rem;display:block}
.rtk-theme .icon-sun{color:var(--orange)}
.rtk-theme .icon-moon{color:var(--text-secondary)}

/* mobile: drop the tagline, compress the nav */
@media (max-width:820px){
  .rtk-tagline{display:none}
}
@media (max-width:640px){
  .rtk-header-inner{padding:0 1rem;height:3.25rem;gap:.5rem}
  .rtk-brand span{display:none}
  .rtk-nav{gap:0}
  .rtk-nav a{padding:.375rem .5rem;font-size:.8125rem}
  .rtk-btn{padding:.375rem .55rem;font-size:.75rem}
}

/* ---------- footer ---------- */
.rtk-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  margin-top:3rem;
}
.rtk-footer-cols{
  max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem;
  display:grid;gap:2rem;grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:640px){
  .rtk-footer-cols{grid-template-columns:1fr;padding:2rem 1rem;gap:1.5rem}
}
.rtk-footer-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.rtk-footer-brand svg{height:24px;width:auto;display:block}
.rtk-footer-brand span{font-weight:700;font-size:.875rem;color:var(--text)}
.rtk-footer-blurb{font-size:.75rem;line-height:1.6;color:var(--text-secondary);max-width:34ch;margin:0}
.rtk-footer-head{
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);margin-bottom:.75rem;
}
.rtk-footer-links{display:flex;flex-direction:column;gap:.375rem}
.rtk-footer-links a{font-size:.875rem;color:var(--text);text-decoration:none}
.rtk-footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
.rtk-footer-legal{
  border-top:1px solid var(--border);
  padding:1rem 1.5rem;text-align:center;font-size:.75rem;color:var(--text-secondary);
}
@media (max-width:640px){ .rtk-footer-legal{padding:1rem;font-size:.7rem} }


/* RTK site styles — built on the shared design tokens.
   Palette, type and shape come from tokens.css (canonical: Email Analyzer).
   Nothing here invents new colours; if a value is missing, add it to tokens.css. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--step-1);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.16;letter-spacing:-.01em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
.lede{color:var(--text-secondary);max-width:62ch}
.mono{font-family:var(--font-mono);font-size:.88em}
.small{font-size:var(--step-0)}
.muted{color:var(--text-secondary)}

/* ---------- shell ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-5)}
.narrow{max-width:46rem}

nav.site{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
nav.site .inner{
  max-width:var(--wrap);margin:0 auto;padding:var(--space-3) var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
nav.site .brand{display:flex;align-items:center;gap:var(--space-3);color:var(--text)}
nav.site .brand svg{height:26px;width:auto;display:block}
nav.site .brand span{font-weight:600;font-size:var(--step-0);letter-spacing:.02em}
nav.site .links{display:flex;align-items:center;gap:var(--space-5)}
nav.site .links a{color:var(--text);font-size:var(--step-0);font-weight:500;opacity:.82}
nav.site .links a:hover{opacity:1;text-decoration:none}
nav.site .links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent)}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);cursor:pointer;
}
.theme-toggle:hover{background:var(--hover)}
.theme-toggle svg{width:15px;height:15px;display:block}

/* ---------- sections ---------- */
main{padding:0 0 var(--space-2)}
section{padding:var(--space-7) 0;border-top:1px solid var(--divider)}
section:first-of-type{border-top:0}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.6rem,6vw,4.4rem);padding-bottom:var(--space-6)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:var(--space-4)}
.cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--primary);color:var(--on-accent);
  padding:.7rem 1.15rem;border-radius:var(--radius);
  font-family:var(--font-sans);font-weight:600;font-size:var(--step-0);
  border:1px solid var(--primary);min-height:44px;
}
.btn:hover{text-decoration:none;background:var(--primary-dark);border-color:var(--primary-dark)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.ghost:hover{background:var(--hover);border-color:var(--border)}

/* the one loud moment: real output, set as type */
.proof{
  margin-top:var(--space-6);border:1px solid var(--border);background:var(--surface);
  max-width:40rem;
}
.proof .bar{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--divider);
  font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-secondary);
}
.proof .bar .dot{width:6px;height:6px;background:var(--accent)}
.proof .body{padding:var(--space-4);font-family:var(--font-mono);font-size:var(--step-0)}
.proof .prow{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--space-3);padding:var(--space-1) 0;align-items:baseline}
.proof .k{color:var(--text-secondary);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase}
.proof .v{color:var(--text);line-height:1.6;overflow-wrap:anywhere}
.proof .ok{color:var(--seal);font-weight:500}
.proof .bad{color:var(--accent);font-weight:500}

/* ---------- product entries ---------- */
.product{padding:var(--space-5) 0;border-top:1px solid var(--divider)}
.product:first-of-type{border-top:0;padding-top:0}
.product-head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.status{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em;text-transform:uppercase;
  padding:.1rem .45rem;border:1px solid;border-radius:var(--radius);line-height:1.6;
}
.status.live{color:var(--seal);border-color:var(--seal)}
.status.beta{color:var(--orange);border-color:var(--orange)}
.host{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-secondary)}

ul.caps{margin:var(--space-3) 0 0;padding:0;list-style:none;max-width:var(--measure)}
ul.caps li{position:relative;padding-left:1.1rem;margin-bottom:var(--space-2);font-size:var(--step-0);color:var(--text)}
ul.caps li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:1px;background:var(--accent)}

/* ---------- faq ---------- */
details{border-top:1px solid var(--divider);padding:var(--space-3) 0}
details:first-of-type{border-top:0}
summary{
  cursor:pointer;font-weight:600;font-size:var(--step-0);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:32px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--text-secondary)}
details[open] summary::after{content:"–"}
details p{margin:var(--space-3) 0 0;color:var(--text-secondary);font-size:var(--step-0)}

/* ---------- prose pages ---------- */
.page-head{padding-top:clamp(2.2rem,5vw,3.5rem);padding-bottom:var(--space-2);border-top:0}
.prose h2{margin:var(--space-6) 0 var(--space-3);font-size:var(--step-2)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:var(--step-0);color:var(--text)}
.prose ul{padding-left:1.1rem;max-width:var(--measure)}
.prose li{margin-bottom:var(--space-2)}
.prose .note{
  border-left:2px solid var(--accent);padding:var(--space-1) 0 var(--space-1) var(--space-4);
  margin:var(--space-5) 0;color:var(--text-secondary);font-size:var(--step-0);
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--border);margin-top:var(--space-7);
  padding:var(--space-6) 0 var(--space-7);color:var(--text-secondary);font-size:var(--step-0);
}
footer.site .cols{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
footer.site a{color:var(--text-secondary)}
footer.site .fcol{display:flex;flex-direction:column;gap:var(--space-2);min-width:9rem}
footer.site .fhead{color:var(--text);font-weight:600;font-size:var(--step-0);margin-bottom:var(--space-1)}
footer.site .legal{margin-top:var(--space-5);font-size:var(--step--1);max-width:70ch}

@media (max-width:640px){
  nav.site .inner{padding:var(--space-2) var(--space-4);gap:var(--space-2)}
  /* keep all four links on one line: drop the wordmark, tighten the type */
  nav.site .brand span{display:none}
  nav.site .brand svg{height:23px}
  nav.site .links{gap:var(--space-3)}
  nav.site .links a{font-size:var(--step--1);white-space:nowrap}
  .wrap{padding:0 var(--space-4)}
  .cta-row .btn{flex:1 1 auto}
  .proof .prow{grid-template-columns:4.4rem 1fr;gap:var(--space-2)}
  .proof .body{font-size:var(--step--1)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}