/* Credit Kindred shared tokens and components. Every color goes through a variable so the
   dark theme is one override block. Palette: preflight/03-brand-resolve.md. */
:root{
  --paper:#fbf6ef; --paper-2:#f4ece1; --card:#ffffff; --ink:#1f1830; --ink-2:#4a4158; --muted:#6c6379;
  --line:#e7ddd0; --ember:#c4531f; --ember-ink:#a8461a; --ember-soft:rgba(217,100,46,.12); --on-ember:#ffffff;
  --plum:#4b2f6b; --plum-soft:rgba(75,47,107,.09); --sage:#256652; --sage-soft:rgba(47,122,100,.12);
  --warn:#9a5b00; --warn-soft:rgba(196,130,20,.14); --danger:#b3261e;
  --shadow:0 1px 2px rgba(31,24,48,.05),0 8px 28px rgba(31,24,48,.07);
  --radius:16px; --radius-s:10px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --mk-panel:var(--card); --mk-ink:var(--ink); --mk-muted:var(--muted); --mk-line:var(--line);
  --mk-hover:rgba(31,24,48,.06); --mk-accent:var(--ember); --mk-accent-ink:var(--ember-ink);
  --mk-accent-soft:var(--ember-soft); --mk-on-accent:var(--on-ember); --mk-bg:var(--paper); --mk-chart:var(--ember);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17121f; --paper-2:#1e1829; --card:#221b2e; --ink:#f3ece2; --ink-2:#d6cdc2; --muted:#a79db3;
  --line:#352c44; --ember:#f08a52; --ember-ink:#f6a476; --ember-soft:rgba(240,138,82,.16); --on-ember:#2a1206;
  --plum:#b9a2dc; --plum-soft:rgba(185,162,220,.12); --sage:#6cc3a6; --sage-soft:rgba(108,195,166,.14);
  --warn:#f2c26b; --warn-soft:rgba(242,194,107,.14); --danger:#f2a196;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --mk-hover:rgba(243,236,226,.08); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#17121f; --paper-2:#1e1829; --card:#221b2e; --ink:#f3ece2; --ink-2:#d6cdc2; --muted:#a79db3;
  --line:#352c44; --ember:#f08a52; --ember-ink:#f6a476; --ember-soft:rgba(240,138,82,.16); --on-ember:#2a1206;
  --plum:#b9a2dc; --plum-soft:rgba(185,162,220,.12); --sage:#6cc3a6; --sage-soft:rgba(108,195,166,.14);
  --warn:#f2c26b; --warn-soft:rgba(242,194,107,.14); --danger:#f2a196;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --mk-hover:rgba(243,236,226,.08); color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ember-ink);text-underline-offset:3px}
img,svg,canvas{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(40px,6.2vw,76px)} h2{font-size:clamp(30px,4.2vw,50px)} h3{font-size:clamp(20px,2.2vw,25px)}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--plum);font-weight:500}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--sans);padding:14px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:focus-visible{outline:3px solid var(--ember-soft);outline-offset:2px}
.btn-primary{background:var(--ember);color:var(--on-ember);box-shadow:0 6px 18px rgba(196,83,31,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--card)}
.btn-s{padding:9px 14px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--mono);padding:6px 9px;border-radius:999px;background:var(--plum-soft);color:var(--plum);white-space:nowrap}
.chip.ok{background:var(--sage-soft);color:var(--sage)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.ember{background:var(--ember-soft);color:var(--ember-ink)}
label.f{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
input.in,textarea.in{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink)}
input.in:focus,textarea.in:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-soft)}
.num{font-variant-numeric:tabular-nums}
.theme-toggle{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:18px;display:grid;place-items:center}
.theme-toggle:hover{background:var(--card)}
.monogram{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);font:700 15px/1 var(--serif);letter-spacing:-.02em}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--serif);color:var(--ink);text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
