/* Next Kopi · design tokens · round 1 · 2026-09-26 · colours re-keyed to the blue-and-coral mark, round 35 · 2026-10-12
   Tokens only. Components reference these; never hard-code a colour. */
/* Fonts load from index.html <link> tags. */
:root{
/* surfaces */
--paper:#F4EFE6;--paper-raised:#FBF8F2;--paper-sunk:#EAE3D6;--scrim:rgba(18,28,40,.38);--glass:rgba(251,248,242,.74);--glass-edge:rgba(27,47,69,.10);
/* ink */
--ink:#1B2F45;--ink-2:#4F5B68;--ink-3:#7F8893;--on-ink:#F4EFE6;
/* lines */
--line:#DED6C7;--line-strong:#C8BDAA;
/* accent: kopi (new, carried by the mark's "next cup") */
--kopi:#A9432C;--kopi-soft:#F6E0D7;--on-kopi:#FFFFFF;--kopi-mark:#D9624A;--mark-cup:#1C456E;--mark-coffee:#D9624A;
/* RSVP semantics */
--in:#2D5F8F;--in-soft:#DDE7F1;--maybe:#86661C;--maybe-soft:#F2E7CA;--out:#62666C;--out-soft:#E6E3DE;--danger:#9B2F45;--danger-soft:#F4DCE0;
/* avatars (initials fallback) */
--av-1:#5E7461;--av-2:#8A5A3C;--av-3:#6B6A8E;--av-4:#9A7B3F;--av-5:#4F6F7A;--av-6:#8C5E6B;
/* type */
--font-display:"Fraunces",Georgia,"Times New Roman",serif;--font-body:"Source Sans 3",-apple-system,"Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--t-display:34px;--t-title:28px;--t-head:20px;--t-body:17px;--t-sub:15px;--t-cap:13px;--t-tab:11px;
/* space · radius · depth · motion */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;
--r-field:14px;--r-card:20px;--r-hero:24px;--r-sheet:28px;--r-pill:999px;
--tap:44px;--tabbar-h:64px;--tabbar-h-compact:52px;--col-desktop:640px;
--shadow-card:0 1px 2px rgba(27,47,69,.06);--shadow-float:0 10px 30px rgba(27,47,69,.16),0 1px 3px rgba(27,47,69,.10);--shadow-sheet:0 -8px 40px rgba(24,30,25,.18);
--ease-sheet:cubic-bezier(.32,.72,0,1); /* @kind other */
--dur-sheet:260ms; /* @kind other */
--dur-tap:120ms; /* @kind other */
}
[data-theme="dark"]{
--paper:#141A15;--paper-raised:#1D2520;--paper-sunk:#252E28;--scrim:rgba(0,0,0,.55);--glass:rgba(34,42,36,.72);--glass-edge:rgba(236,233,227,.10);
--ink:#ECE9E3;--ink-2:#B4B8BE;--ink-3:#878D95;--on-ink:#141A15;
--line:#2E3830;--line-strong:#3E4A41;
--kopi:#F08A73;--kopi-soft:#3A2620;--on-kopi:#1A120C;--kopi-mark:#F08A73;--mark-cup:#8DB4DA;--mark-coffee:#F08A73;
--in:#8DB4DA;--in-soft:#1E2E3D;--maybe:#D8B866;--maybe-soft:#3A3220;--out:#ADB0B4;--out-soft:#2A2C2E;--danger:#E88AA0;--danger-soft:#3D2028;
--shadow-float:0 10px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);--shadow-sheet:0 -8px 40px rgba(0,0,0,.5);
}
/* round 37 · C: one desktop width system. Page 1080, Form 640, Dialog 480; 40px side margin at least; phones and tablets keep 640 */
:root{--w-page:1080px;--w-form:640px;--w-dialog:480px}
@media (min-width:1024px){:root{--col-desktop:min(var(--w-page), calc(100vw - 80px));--col-form:min(var(--w-form), calc(100vw - 80px))}}