/* =====================================================================
   Sumac · design tokens
   It feels like texting a person. Derived from the Spiced chat app's
   companion mode. Evening (dark) is the default and lives on :root;
   Daylight (light) follows the visitor's system setting or the footer
   switch ([data-theme="light"]).
   --sumac is for your own bubbles, the primary action and switches that
   are on, always with white text. --sumac-ink is sumac as text (links,
   lit words). Gradients are only for portrait placeholders.
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  color-scheme: dark;
  --ground: #241f26;          /* page: dusky plum-grey */
  --raised: #2b252d;          /* alternate sections */
  --card: #2e2830;            /* cards, the thread, profile cards */
  --card-2: #352e37;          /* inputs, chips and anything inside a card */
  --them: #3a333d;            /* their bubbles */
  --line: #383139;            /* hairlines between rows */
  --line-2: #4a424d;          /* stronger lines: inputs, the switch track */
  --ink: #f3eef4;             /* headings and text */
  --ink-2: #cfc4d1;           /* secondary text */
  --muted: #b3a8b5;           /* timestamps, labels, meta */
  --sumac: #b04760;           /* your bubbles, the primary action, switches on (white text) */
  --sumac-2: #9a3b53;         /* sumac pressed and hovered */
  --on-sumac: #ffffff;        /* text on sumac */
  --sumac-ink: #e48a9c;       /* sumac as text: links, the lit words, focus */
  --sumac-soft: #3f2932;      /* chosen tiles, the current page */
  --online: #7fd6a4;          /* the online dot, never text on its own */
  --focus: #e48a9c;
  --portrait-1: linear-gradient(155deg, #f0b4bf 0%, #c0678a 48%, #6e4a8e 100%);  /* portrait placeholders only */
  --portrait-2: linear-gradient(155deg, #f6cfa8 0%, #d98478 50%, #8e4766 100%);
  --portrait-3: linear-gradient(155deg, #c9d8c2 0%, #8ba7a0 45%, #4f5b82 100%);
  --portrait-4: linear-gradient(155deg, #e3c6f0 0%, #a77bc4 50%, #5b3f7a 100%);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.75);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -36px rgba(0, 0, 0, 0.9);
  --shadow-bubble: 0 1px 1px rgba(0, 0, 0, 0.2);

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-stretch: 88%;          /* headings and the wordmark: Instrument Sans at wdth 88 */

  --fs-h1: clamp(44px, 6.2vw, 92px);
  --fs-h2: clamp(32px, 4vw, 56px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.4vw, 21px);
  --fs-body: 17px;
  --fs-bubble: 16.5px;
  --fs-small: 15px;
  --fs-label: 13px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 112px;

  --r-bubble: 20px;           /* message bubbles */
  --r-tail: 6px;              /* the bubble's tail corner */
  --r-card: 22px;             /* cards, the thread, profile cards */
  --r-s: 14px;                /* inputs, small tiles */
  --r-pill: 999px;            /* every control */

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 160ms;
  --d: 320ms;
  --d-slow: 700ms;
  --d-type-min: 900ms;        /* the shortest message's typing time */
  --d-type-max: 1600ms;       /* the longest message's typing time */
}

/* ---------- Daylight (light) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #f4f1f5;
    --raised: #eeeaf0;
    --card: #ffffff;
    --card-2: #f7f4f8;
    --them: #ece6ef;
    --line: #e4dee6;
    --line-2: #cfc6d2;
    --ink: #2a2330;
    --ink-2: #4a4150;
    --muted: #6a6070;
    --sumac: #b04760;
    --sumac-2: #9a3b53;
    --on-sumac: #ffffff;
    --sumac-ink: #9e3a53;
    --sumac-soft: #f6e3e8;
    --online: #2f8f5b;
    --focus: #9e3a53;
    --shadow-card: 0 1px 2px rgba(42, 35, 48, 0.05), 0 18px 40px -26px rgba(42, 35, 48, 0.32);
    --shadow-lift: 0 1px 2px rgba(42, 35, 48, 0.05), 0 40px 80px -40px rgba(42, 35, 48, 0.45);
    --shadow-bubble: 0 1px 1px rgba(42, 35, 48, 0.08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f4f1f5;
  --raised: #eeeaf0;
  --card: #ffffff;
  --card-2: #f7f4f8;
  --them: #ece6ef;
  --line: #e4dee6;
  --line-2: #cfc6d2;
  --ink: #2a2330;
  --ink-2: #4a4150;
  --muted: #6a6070;
  --sumac: #b04760;
  --sumac-2: #9a3b53;
  --on-sumac: #ffffff;
  --sumac-ink: #9e3a53;
  --sumac-soft: #f6e3e8;
  --online: #2f8f5b;
  --focus: #9e3a53;
  --shadow-card: 0 1px 2px rgba(42, 35, 48, 0.05), 0 18px 40px -26px rgba(42, 35, 48, 0.32);
  --shadow-lift: 0 1px 2px rgba(42, 35, 48, 0.05), 0 40px 80px -40px rgba(42, 35, 48, 0.45);
  --shadow-bubble: 0 1px 1px rgba(42, 35, 48, 0.08);
}