@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02FF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02FF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02FF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}

/* Ring29 design tokens. Single source of truth for the UI. Import once, before component CSS.
   Light is the base. Dark redefines tokens only. Components must use tokens, never literals.
   Custom accent text is adjusted to at least 4.5:1 on its actual surfaces. */

:root {
  /* Ring is the neutral fallback. ring29-theme.js applies the saved palette. */
  --color-page: #eef0f3;
  --color-surface: #ffffff;
  --color-surface-2: #e5e8ed;
  --color-line: #d1d7e0;
  --color-fg: #20242d;
  --color-muted: #606a79;
  --color-faint: #a1a9b6;
  --color-accent: #384152;
  --color-on-accent: #ffffff;
  --color-action: #384152;
  --color-on-action: #ffffff;
  --color-accent-soft: #e9eaec;
  --color-selected: #e9eaec;
  --color-code: #e5e8ed;
  --color-good: #606b80;
  --color-good-soft: #e9ecf3;
  --color-agent: #345475;
  --color-agent-soft: #e8eef5;
  --color-warn: #8f5200;
  --color-warn-soft: #fdebc8;
  --color-crit: #b0261d;
  --color-crit-soft: #fde1de;
  --color-unread: #f1b950;
  --color-unread-edge: #855514;
  --terminal-bg: #111216;
  --terminal-bar: #191b21;
  --terminal-line: #343a46;
  --terminal-fg: #ebedf2;
  --terminal-muted: #a0a8b7;
  --terminal-accent: #c2c8d3;
  --terminal-status: #b5bfd4;
  --terminal-warn: #f0c68c;
  --terminal-error: #ffb4ab;

  /* ---------- type ---------- */
  --font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-ui: 14px;             /* chrome, rows, buttons */
  --text-small: 12px;          /* meta, tags, hints */
  --text-read: 16px;           /* message body, reader */
  --text-write: 17px;          /* editor body */
  --text-h2: 21px;
  --text-title: clamp(24px, 3.4cqi, 32px);   /* message title, needs a container query context */
  --leading-ui: 1.5;
  --leading-read: 1.65;
  --leading-write: 1.7;
  --measure: 680px;            /* reading and writing column, about 68 characters */

  /* ---------- space, shape, depth ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 6px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 999px;
  --shadow-float: 0 1px 2px rgb(10 20 60 / 0.06), 0 14px 36px -18px rgb(10 20 60 / 0.35);
  --z-rail: 6; --z-scrim: 5; --z-float: 12; --z-toast: 14; --z-palette: 20;

  /* ---------- layout (container widths, not window widths) ---------- */
  --bp-medium: 560px;   /* two panes: list + message */
  --bp-wide: 900px;     /* three panes: strip + rail + list + message */
  --w-strip: 60px; --w-rail: 196px; --w-list: 330px; --w-list-medium: 320px;

  /* ---------- motion ---------- */
  --dur-press: 90ms;       /* press feedback, toggles */
  --dur-fade: 140ms;       /* hover, fades, palette in */
  --dur-pane: 220ms;       /* panes, drawers, focus mode */
  --dur-enter: 360ms;      /* large entrances, arrival highlight */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* things arriving */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* things leaving */
  --ease-spring: linear(0, 0.42 12%, 0.92 26%, 1.05 40%, 0.99 58%, 1);  /* optional flourish, toast and marker only */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-page: #18191e;
  --color-surface: #191b21;
  --color-surface-2: #292c34;
  --color-line: #434955;
  --color-fg: #ebedf2;
  --color-muted: #a0a8b7;
  --color-faint: #697285;
  --color-accent: #c2c8d3;
  --color-on-accent: #000000;
  --color-action: #c2c8d3;
  --color-on-action: #000000;
  --color-accent-soft: #36383f;
  --color-selected: #36383f;
  --color-code: #292c34;
  --color-good: #b5bfd4;
  --color-good-soft: #29303e;
  --color-agent: #acc6e0;
  --color-agent-soft: #252e40;
  --color-warn: #f0c68c;
  --color-warn-soft: #392a1d;
  --color-crit: #ffb4ab;
  --color-crit-soft: #431f24;
  --color-unread: #efc16c;
  --color-unread-edge: #efc16c;
  --terminal-bg: #111216;
  --terminal-bar: #191b21;
  --terminal-line: #343a46;
  --terminal-fg: #ebedf2;
  --terminal-muted: #a0a8b7;
  --terminal-accent: #c2c8d3;
  --terminal-status: #b5bfd4;
  --terminal-warn: #f0c68c;
  --terminal-error: #ffb4ab;
  --color-scrim: rgb(0 0 0 / 0.55);
  --shadow-float: 0 14px 36px -18px rgb(0 0 0 / 0.8);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-page: #18191e;
  --color-surface: #191b21;
  --color-surface-2: #292c34;
  --color-line: #434955;
  --color-fg: #ebedf2;
  --color-muted: #a0a8b7;
  --color-faint: #697285;
  --color-accent: #c2c8d3;
  --color-on-accent: #000000;
  --color-action: #c2c8d3;
  --color-on-action: #000000;
  --color-accent-soft: #36383f;
  --color-selected: #36383f;
  --color-code: #292c34;
  --color-good: #b5bfd4;
  --color-good-soft: #29303e;
  --color-agent: #acc6e0;
  --color-agent-soft: #252e40;
  --color-warn: #f0c68c;
  --color-warn-soft: #392a1d;
  --color-crit: #ffb4ab;
  --color-crit-soft: #431f24;
  --color-unread: #efc16c;
  --color-unread-edge: #efc16c;
  --terminal-bg: #111216;
  --terminal-bar: #191b21;
  --terminal-line: #343a46;
  --terminal-fg: #ebedf2;
  --terminal-muted: #a0a8b7;
  --terminal-accent: #c2c8d3;
  --terminal-status: #b5bfd4;
  --terminal-warn: #f0c68c;
  --terminal-error: #ffb4ab;
  --color-scrim: rgb(0 0 0 / 0.55);
  --shadow-float: 0 14px 36px -18px rgb(0 0 0 / 0.8);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 1ms; --dur-fade: 1ms; --dur-pane: 1ms; --dur-enter: 1ms; }
}

:root{--r29-bg:var(--color-page);--r29-surface:var(--color-surface);--r29-muted-surface:var(--color-surface-2);--r29-text:var(--color-fg);--r29-muted:var(--color-muted);--r29-border:var(--color-line);--r29-accent:var(--color-accent);--r29-accent-text:var(--color-on-accent);--r29-accent-wash:var(--color-accent-soft);--r29-success:var(--color-good);--r29-warning:var(--color-warn);--r29-error:var(--color-crit);--r29-font:var(--font-body);--r29-mono:var(--font-mono);--r29-radius:var(--radius-md)}