/* Squire design tokens — pulled verbatim from the claude.ai/design "Squire"
   project (styles.css, 2026-08-28). The identity is now a parchment page
   with dark-green accents: the light surface carries the product; the green
   ground is spent on the topline, the user's bubbles, and the privacy band.
   Buttons are ink at rest, dark green on hover. Square corners, hairlines. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Familjen+Grotesk:wght@400;500;600&display=swap');
:root{
--paper:#f4eedb;
--card:#f8f3e2;
--ink:#1c221d;
--muted:#71705f;
--hairline:#ddd3bc;
--hairline-dark:#c6ba9d;
--ground:#16382b;
--ground-lift:#1e4534;
--green:#1f4d3a;
--green-deep:#153427;
--parchment:#ece1c6;
--parchment-dim:rgba(236,225,198,.5);
--parchment-faint:rgba(236,225,198,.28);
--display:"Instrument Serif",Georgia,serif;
--serif-italic:"Instrument Serif",Georgia,serif;
--body:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font:16.5px/1.65 var(--body)}
h1,h2,h3{font-family:var(--display);font-weight:400}
a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline-dark)}
a:hover{text-decoration-color:currentColor}
.caps{font:500 .7rem var(--body);text-transform:uppercase;letter-spacing:.3em}
.btn{display:inline-block;white-space:nowrap;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:15px 44px;color:var(--ink);background:transparent;font:500 .76rem var(--body);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ground);border-color:var(--ground);color:var(--paper);text-decoration:none}
.btn-solid{display:inline-block;white-space:nowrap;background:var(--ink);color:var(--paper);padding:11px 26px;font:500 .7rem var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer}
.btn-solid:hover{background:var(--ground);text-decoration:none}
.rule2{height:4px;border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark)}
