/* Gist design tokens. Every color, font, size and radius the UI uses lives here, so a new
   design direction is a new copy of this file (plus component tweaks), not a code change. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/PlexMono-500.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/BricolageGrotesque.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/DMSans.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  /* Skin: Spark (Daniel, Oct 8 2026, 11:38 AM: "Go with the spark theme for now"). Bold and branded:
     cobalt, a hit of lime, chunky grotesk type (Gist-Skins.pdf, skin 4 of 5). Component touches that
     tokens alone cannot carry (blue hero card, black tab bar) live in spark.css. Token names are kept
     from Direction C so every page re-skins without code changes.
     ink (text); ink-2 secondary (8.9:1 on page); ink-3 meta (5.6:1 on page); ink-4 icons/dividers only */
  --ink:#0E0F12; --ink-2:#41444C; --ink-3:#5B5F69; --ink-4:#A3A6AE;
  /* surfaces */
  --paper:#F3F3EF; --card:#FFFFFF; --rule:#E1E1DA; --rule-2:#EAEAE4; --tint:#ECECE6;
  --bubble:#E8E8E2; --avatar-bg:#E3E7FF; --switch-off:#D3D3CC;
  /* member avatar tones */
  --tone-1:#2C3FE0; --tone-2:#0E0F12; --tone-3:#6B7080; --tone-4:#B8BCC6;
  /* the tap colour: cobalt on buttons, links, numerals, due days, the unread dot, the active tab */
  --brand:var(--action); --lime:var(--attention); --bar:#0E0F12;
  --red:var(--brand); --red-tint:var(--action-tint); --tap:var(--action); --tap-press:var(--action-hover);
  --danger:#C0341D;
  /* three states, each always with its word and count; "on you" is the lime hit */
  --on-you:#0E0F12; --on-you-tint:var(--lime);
  --waiting:#8A5A06; --waiting-tint:#FCF0D6;
  --settled:var(--done); --settled-tint:var(--done-tint);
  /* search highlight, live dot (desktop only) */
  --hl:var(--lime); --green:#17683F;
  /* type (17px phone / 16px desktop body, line-height 1.5; 15 secondary, 13 meta) */
  --serif:"Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --sans:"DM Sans", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --name-phone:17px; --name-desktop:20px;
  /* 8pt spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* shape */
  --r:12px;
  --content-max:760px;
  --rail-w:320px;
  /* chat page: cards on a muted page; the catch-up card is the cobalt hero */
  --page-muted:#F3F3EF; --card-rule:#ECECE6;
  --callout:var(--attention-wash); --callout-rule:#E9F1B8; --due-ink:var(--brand);
  --chip-bg:#F0F0EA; --chip-ink:var(--ink-2);
  --bullet-dot:var(--brand);
  --hero:var(--info-wash); --hero-ink:var(--info-ink); --hero-ink-2:var(--ink-2);
  --r-card:22px; --r-chip:999px; --r-btn:999px; --r-tile:20px;
  --font-hero:var(--serif); --font-ui:var(--sans); --font-label:var(--sans);
  /* Color system (Daniel, Oct 8 2026, 4:20 PM): few colours, ONE meaning each, everywhere (the
     iMessage / WhatsApp principle). Components use these roles, never a one-off colour.
     action    the one primary action colour: every primary button, link button, Save, Send, Add to
               calendar; the same hover and pressed state on every page
     attention Waiting on you (a pale yellow wash, a yellow bar, the yellow dot)
     important the importance flag (a small red-orange dot / label)
     done      a finished thing (green check)
     info      the "Since your last message" summary (a light tint of the accent)
     muted     secondary text and quiet controls */
  --action:#2C3FE0; --action-hover:#1F2EB8; --action-press:#18249A; --action-ink:#FFFFFF; --action-tint:#E3E7FF; --action-tint-hover:#D5DBFF;
  --attention:#E4F87A; --attention-wash:#F8FCE1; --attention-bar:#C6DF2C; --attention-dot:#B5CF14; --attention-ink:#0E0F12;
  --important:#D9480F; --important-tint:#FDECE4;
  --done:#17683F; --done-tint:#E0F2E7;
  --info:#2C3FE0; --info-wash:#EEF0FD; --info-rule:#D9DEFB; --info-ink:#0E0F12;
  --muted:#5B5F69;
  /* Desktop reading column for the chat page: wide containers, comfortable text measure. */
  --page-max:880px; --measure:68ch;
}