/* Stylst — "Atelier" web design system. Shared tokens + nav/buttons/footer across the
   marketing site, the web app, the admin, and the legal pages. Warm paper + ink + a
   single clay accent. Light is default; dark via prefers-color-scheme. Mirrors the
   Claude Design "Listd Web" frames (the app uses the same palette in app/lib/theme.js). */

:root {
  --paper:#f4efe6; --surface:#fbf8f2; --raise:#ffffff;
  --ink:#211c15; --ink2:#6f6757; --muted:#8c8273;
  --clay:#bd5a36; --clayhover:#a64c2b; --on-clay:#ffffff;
  --line:#e3dccf; --line2:#ddd4c4;
  --green:#4f7a52; --green-bg:#eaf0e7;
  --pill:#f0e2d8;
  --shadow:0 20px 50px -30px rgba(40,30,15,.3);
  --shadow-lg:0 30px 70px -30px rgba(40,30,15,.4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#1a1712; --surface:#232019; --raise:#2b271f;
    --ink:#f1ece1; --ink2:#b8b1a1; --muted:#8c8473;
    --clay:#d06a42; --clayhover:#e0815c; --on-clay:#1a1712;
    --line:#2a261d; --line2:#413c30;
    --green:#9ad19c; --green-bg:#26321f;
    --pill:#3a2a20;
    --shadow:0 20px 50px -30px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -30px rgba(0,0,0,.6);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--clay); color:var(--on-clay); }
a { color:inherit; }
img { max-width:100%; display:block; }

.serif { font-family:'Newsreader',Georgia,serif; }
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
.eyebrow { font:600 12px/1 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--clay); text-transform:uppercase; }

/* --- nav --- */
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 32px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:40; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.mark { width:28px; height:28px; border-radius:8px; background:url(/icon.png) center/cover no-repeat; flex:none; } /* the actual mobile app icon */
.word { font:500 23px 'Newsreader',serif; color:var(--ink); }
.navlinks { display:flex; align-items:center; gap:28px; font:500 14px 'Hanken Grotesk'; color:var(--ink2); }
.navlinks a { text-decoration:none; color:inherit; }
.navlinks a:hover { color:var(--ink); }
.navcta { display:flex; align-items:center; gap:14px; }

/* --- buttons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; border-radius:12px; padding:13px 22px; font:600 15px 'Hanken Grotesk'; cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,transform .05s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--clay); color:var(--on-clay); }
.btn.primary:hover { background:var(--clayhover); }
.btn.secondary { background:var(--raise); border:1.5px solid var(--line2); color:var(--ink); }
.btn.secondary:hover { border-color:var(--clay); }
.btn.ghost { background:transparent; color:var(--ink2); }
.btn.ghost:hover { color:var(--ink); }
.btn.sm { padding:10px 18px; font-size:14px; border-radius:11px; }
.btn.lg { padding:15px 26px; font-size:16px; border-radius:13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.pill { display:inline-flex; align-items:center; gap:7px; background:var(--pill); border-radius:999px; padding:6px 13px; font:600 12px 'Hanken Grotesk'; color:var(--clayhover); }
.pill .dot { width:7px; height:7px; border-radius:50%; background:var(--clay); }

/* --- footer --- */
.footer { border-top:1px solid var(--line); background:var(--surface); padding:40px 32px; }
.footer-inner { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer .brand .word { font-size:20px; }
.footer-links { display:flex; gap:22px; font:500 14px 'Hanken Grotesk'; color:var(--ink2); }
.footer-links a { text-decoration:none; color:inherit; }
.footer-links a:hover { color:var(--ink); }
.footer-copy { font:400 13px 'Hanken Grotesk'; color:var(--muted); width:100%; text-align:center; margin-top:6px; }

@media (max-width:720px){
  .nav { padding:14px 18px; }
  .navlinks { display:none; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}