/* Vendored from the flytedesk Design System (Claude Design project
   "flytedesk Design System"), tokens/fonts.css + colors.css + typography.css +
   space.css + elevation.css + motion.css + layout.css, combined for this app
   in the same order as the real system's own styles.css @import list.
   Source of truth stays the Design System project — re-sync by hand if it
   changes upstream. Font files live in ./fonts/ (relative to this file). */

/* ============ tokens/fonts.css ============ */
/* flytedesk webfonts.
   SUBSTITUTION NOTE: flytedesk.com sets its type in a geometric grotesque
   (Aeonik Pro is the closest commercial match). No licensed Aeonik files were
   provided, so Figtree (Google Fonts, SIL OFL) ships here as the open stand-in
   and is listed first in --font-sans. Drop Aeonik woff2 files into
   assets/fonts/ and add the @font-face block to promote it. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin.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:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --font-sans:"Figtree","Aeonik Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:var(--font-sans);
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ============ tokens/colors.css ============ */
/* Brand core is sampled from the real flytedesk wordmark (assets/logo-wordmark.svg):
   navy #052E4A, blue #2272BA, sky #80BFE9. The ramp is built around those three
   exact values; the rest is interpolated. */
:root{
  --navy:#052E4A;
  --blue-25:#F8FBFE;
  --blue-50:#F1F7FC;
  --blue-100:#DEEBF7;
  --blue-200:#C3DDF1;
  --blue-300:#A0C9E8;
  --blue-400:#80BFE9;
  --blue-500:#4F97D6;
  --blue-600:#2272BA;
  --blue-700:#1A5B96;
  --blue-800:#144674;
  --blue-900:#0D3454;
  --blue-950:#052E4A;

  --n-0:#FFFFFF;
  --n-25:#FBFCFD;
  --n-50:#F7F8FA;
  --n-100:#F1F3F6;
  --n-200:#E5E8ED;
  --n-300:#D2D7DF;
  --n-400:#A8B0BD;
  --n-500:#7C8698;
  --n-600:#5A6474;
  --n-700:#414958;
  --n-800:#2A303B;
  --n-900:#171B22;
  --n-950:#0B0D11;
  --ink:#0A0A0B;

  /* teal — reserved for the Campus Saturation Index. Never interaction. */
  --csi-1-fill:#EEF0F3;--csi-1-edge:#C7CDD6;--csi-1-text:#4A5261;--csi-1-mark:#C6CDD5;
  --csi-2-fill:#D3EDE4;--csi-2-edge:#A7D9C8;--csi-2-text:#14584A;--csi-2-mark:#5EBFA4;
  --csi-3-fill:#86D2BC;--csi-3-edge:#5CBFA4;--csi-3-text:#0B3F35;--csi-3-mark:#1F9880;
  --csi-4-fill:#0E7C68;--csi-4-edge:#0B6455;--csi-4-text:#FFFFFF;--csi-4-mark:#0A5B4D;
  --csi-alert:#E0A32B;
  --csi-ramp-1:#F1F4F5;--csi-ramp-2:#D9EDE6;--csi-ramp-3:#A9DECB;
  --csi-ramp-4:#6CC7AE;--csi-ramp-5:#2E9E85;--csi-ramp-6:#0B5F50;

  /* criterion importance — the five-level planner priority scale, ordered
     Nudge < Lean < Priority < Driver < Deal-breaker on a slate -> blue -> indigo
     -> amber -> red ramp. Same shape as the CSI ramp above (fill/edge/text/mark
     per stop) because it is used the same two ways: `mark` is the solid the meter
     segments and glyphs are drawn in, `fill`+`edge` tint a criterion card's
     background and border, `text` is the AA-safe label colour ON that fill.
     Deliberately NOT aliases of --info/--warn/--danger: importance is an ordered
     scale, not a status, and a Driver criterion is not a warning. */
  --imp-1-fill:#EEF0F3;--imp-1-edge:#D2D7DF;--imp-1-text:#414958;--imp-1-mark:#7C8698;
  --imp-2-fill:#DEEBF7;--imp-2-edge:#C3DDF1;--imp-2-text:#144674;--imp-2-mark:#2272BA;
  --imp-3-fill:#E7E3F8;--imp-3-edge:#C9C1EE;--imp-3-text:#342A6B;--imp-3-mark:#6E5BC9;
  --imp-4-fill:#FDF1DA;--imp-4-edge:#F0D49A;--imp-4-text:#6B4A05;--imp-4-mark:#BD800A;
  --imp-5-fill:#FCE7E5;--imp-5-edge:#F2BDB8;--imp-5-text:#7A241D;--imp-5-mark:#D0473D;

  /* EntityRow — the list card's own hairline, and its one non-default row tone.
     The border is a purpose-built token rather than --border because an EntityRow
     card is --surface-2 sitting on a --surface panel, and those two differ by only
     1.06:1 in light mode: the gap between two cards is invisible unless the
     hairline itself carries it. --erow-border is 1.46:1 against the panel and
     1.38:1 against the card (vs --border's 1.23 / 1.16), which is what actually
     makes the gap read. --erow-border-hover keeps a distinct hover step on top. */
  --erow-border:#CFD6E0;
  --erow-border-hover:#B6C0CE;
  --erow-danger-fill:#FCE9E6;
  --erow-danger-border:#EFB7B1;
  --erow-danger-text:#7A241D;

  /* Solid icon button (IconButton variant="solid") — the filled action, e.g. the add /
     remove button on every EntityRow. Per tone: rest, hover (darker), pressed (darker
     still) and the glyph ink. Measured, not eyeballed, in every state: white ink on the
     fill is 5.02:1 or better (the weakest is neutral at rest), and the fill is 4.29:1 or
     better against each ground it sits on — --surface-2 (#F7F8FA), --erow-danger-fill
     (#FCE9E6) and --surface — so the button reads as a button on a red row as well. */
  --btn-solid-neutral-bg:#2272BA;--btn-solid-neutral-bg-hover:#1A5B96;--btn-solid-neutral-bg-active:#144674;--btn-solid-neutral-ink:#FFFFFF;
  --btn-solid-ok-bg:#1E7A4C;--btn-solid-ok-bg-hover:#18663F;--btn-solid-ok-bg-active:#145A38;--btn-solid-ok-ink:#FFFFFF;
  --btn-solid-danger-bg:#B93A31;--btn-solid-danger-bg-hover:#9E2F27;--btn-solid-danger-bg-active:#862720;--btn-solid-danger-ink:#FFFFFF;

  /* Soft icon button (IconButton variant="soft") — MP-52's "lighter fill, darker border"
     row action. A lighter, less saturated fill than --btn-solid-* with a visibly darker
     border drawn around it, so the button still reads as a button rather than a solid
     colour chip. Measured exactly like --btn-solid-* above, against the same two grounds
     (--surface-2 #F7F8FA and --erow-danger-fill #FCE9E6): white ink on the fill is 4.53:1
     or better and the fill itself is 3.87:1 or better against either ground. Going any
     lighter breaks one of those two floors — a fill light enough to read as "soft" in the
     usual badge sense (e.g. --ok-fill/--danger-fill) is only ~1.05:1 from --erow-danger-fill
     and fails outright; this is the lightest fill that still clears the bar next to a red
     row. The border reuses the darker --btn-solid-*-bg-active token, 1.8-2:1 off the new
     fill and 7:1+ off both grounds, so it reads even where hue alone would not.

     MP-114 hover/active: darkened the same way --btn-solid-* darkens for its own
     hover/active (light theme gets darker as you press deeper). -bg-hover is 8% darker
     than -bg, -bg-active 16% darker; white ink stays 5.19:1+ / 5.97:1+ and the fill stays
     4.45:1+ against --erow-danger-fill (the tighter of the two grounds) at every step.
     These are real fills, not a `filter: brightness()` restatement — a filter changes
     what the eye sees without changing `background-color`, so a contrast check (and a
     person's actual reading of the button) that goes by the declared colour never sees
     it move. */
  --btn-soft-ok-bg:#557F6A;--btn-soft-ok-bg-hover:#4E7562;--btn-soft-ok-bg-active:#476B59;--btn-soft-ok-border:#145A38;--btn-soft-ok-ink:#FFFFFF;
  --btn-soft-danger-bg:#C84E43;--btn-soft-danger-bg-hover:#B8483E;--btn-soft-danger-bg-active:#A84238;--btn-soft-danger-border:#862720;--btn-soft-danger-ink:#FFFFFF;

  --ok-fill:#DFF3E8;--ok-border:#A8DDC2;--ok-text:#0E5233;--ok-solid:#34A26B;--ok-emph:#57C68C;
  --warn-fill:#FDF1DA;--warn-border:#F0D49A;--warn-text:#6B4A05;--warn-solid:#C8890B;
  --danger-fill:#FCE7E5;--danger-border:#F2BDB8;--danger-text:#7A241D;--danger-solid:#D0473D;
  --info-fill:#DEEBF7;--info-border:#C3DDF1;--info-text:#144674;--info-solid:#2272BA;

  --chart-1:#2272BA;--chart-2:#23A183;--chart-3:#7C8698;--chart-4:#C8890B;
  --chart-5:#6E5BC9;--chart-6:#C86B8A;--chart-7:#4F97D6;--chart-8:#A8B0BD;

  /* sequential data ramp — one hue, five steps, for a magnitude (a count per state). Light runs pale to
     dark, dark runs near-surface to light, so the largest value is always the most prominent against
     its surface. Distinct from the saturation index (--csi-*, teal, reserved for that index) and from
     the categorical --chart-* ramp (which names kinds, never amounts). */
  --seq-1:var(--blue-100);--seq-2:var(--blue-300);--seq-3:var(--blue-500);--seq-4:var(--blue-700);--seq-5:var(--blue-900);

  /* channel identity — one hue per medium, hue family per channel group.
     Blues = large format, violets = moving, ambers = paper, roses = direct,
     slate = digital. Never reuse a channel hue for anything else; the colour IS
     the label. Teal stays reserved for the saturation index. */
  --ch-ooh:#2272BA;--ch-dooh:#4F97D6;
  --ch-transit:#6E5BC9;--ch-mobile:#9B8DE0;
  --ch-print:#97650A;--ch-posters:#C8890B;--ch-flyers:#E0A93F;
  --ch-email:#C86B8A;--ch-sms:#E0A0B6;
  --ch-web:#7C8698;--ch-other:#A8B0BD;

  /* AA-safe default primary: white label clears 4.5:1 at the lightest stop */
  --grad-primary:linear-gradient(100deg,#1A5B96 0%,#3671B8 100%);/* @kind color */
  --grad-primary-hover:linear-gradient(100deg,#144674 0%,#2C63A4 100%);/* @kind color */
  /* As observed on flytedesk.com CTAs. Large text only (>=19px/700). */
  --grad-brand-soft:linear-gradient(100deg,#2272BA 0%,#6FA8E8 100%);/* @kind color */
  --grad-brand-soft-hover:linear-gradient(100deg,#1A5B96 0%,#5A98DE 100%);/* @kind color */
  --grad-ok:linear-gradient(100deg,#4CBF84 0%,#63CE95 100%);/* @kind color */
  --wash-hero:radial-gradient(120% 80% at 50% 110%,#D5E7F7 0%,#EDF4FC 45%,#FFFFFF 78%);/* @kind color */
  --wash-panel:linear-gradient(180deg,#F4F9FE 0%,#FFFFFF 100%);/* @kind color */
  --wash-edge:linear-gradient(90deg,#EDF4FC 0%,#FFFFFF 60%);/* @kind color */

  /* semantic aliases — always design against these, not the ramps */
  --page:var(--n-25);
  --surface:var(--n-0);
  --surface-2:var(--n-50);
  --surface-3:var(--n-100);
  --surface-brand:var(--blue-50);
  --surface-brand-strong:var(--blue-100);
  --text-on-surface-brand:var(--blue-800);
  --selection-bg:var(--blue-200);
  --selection-text:var(--navy);
  --border:var(--n-200);
  --border-strong:var(--n-300);
  --border-brand:var(--blue-200);
  --text:var(--n-900);
  --text-2:var(--n-600);
  --text-muted:var(--n-500);
  --text-disabled:var(--n-400);
  --text-on-brand:#FFFFFF;
  --display-ink:var(--ink);
  --brand:var(--blue-600);
  --brand-hover:var(--blue-700);
  --brand-active:var(--blue-800);
  --brand-soft:var(--blue-100);
  --link:var(--blue-600);
  --link-hover:var(--blue-800);
  --scrim:rgba(11,13,17,.45);
  --skeleton-base:var(--n-100);
  --skeleton-sheen:rgba(255,255,255,.72);
  --focus-ring:0 0 0 2px var(--page),0 0 0 4px var(--blue-500);

  /* chat kit — surface aliases so a theme lives in one place and consumers
     never pass styling props. Re-declared in the dark scope below: these are
     aliases, and if they only exist here they resolve to light values wherever
     the theme is nested rather than set on <html>. */
  /* the two that carry most of the readability: the gap inside one sender's run
     and the gap between runs. Their RATIO is what makes a transcript scannable. */
  --chat-gap-run:6px;
  --chat-gap-turn:26px;
  --chat-pad-x:18px;
  --chat-pad-y:16px;
  --chat-radius:var(--r-lg);
  --chat-surface:var(--surface);
  --chat-surface-2:var(--surface-2);
  --chat-border:var(--border);
  --chat-text:var(--text);
  --chat-text-2:var(--text-2);
  --chat-muted:var(--text-muted);
  --chat-accent:var(--brand);
  --chat-user-fill:var(--surface-brand);
  --chat-user-border:var(--border-brand);
  --chat-user-text:var(--text);
  --chat-code-bg:var(--n-50);
  --chat-code-border:var(--border);
  --chat-max-read:74ch;
  --code-kw:#6E5BC9;--code-str:#97650A;--code-num:#C86B8A;--code-com:#8A93A2;
  --code-fn:#1A5B96;--code-type:#0D3454;--code-prop:#2272BA;--code-lit:#7A241D;--code-pun:#5A6474;
  --diff-add-bg:#EAF6EF;--diff-add-text:#0E5233;--diff-del-bg:#FCECEA;--diff-del-text:#7A241D;

}
[data-theme="dark"]{
  color-scheme:dark;
  --page:#0B0D11;
  --surface:#14171D;
  --surface-2:#1B1F27;
  --surface-3:#232832;
  --surface-brand:#12283D;
  --surface-brand-strong:#173D5C;
  --text-on-surface-brand:#9CC7EC;
  --selection-bg:#1E3F5E;
  --selection-text:#F2F4F7;
  --border:#2B313C;
  --border-strong:#3A414E;
  --border-brand:#1E3F5E;
  --text:#F2F4F7;
  --text-2:#A8B0BD;
  --text-muted:#7C8698;
  --text-disabled:#5A6474;
  --display-ink:#FFFFFF;
  --brand:#6FA8E8;
  --brand-hover:#8FBEF0;
  --brand-active:#A0C9E8;
  --brand-soft:#12283D;
  --link:#80BFE9;
  --link-hover:#A0C9E8;
  --skeleton-base:#1F242D;
  --skeleton-sheen:rgba(255,255,255,.06);
  --seq-1:var(--blue-900);--seq-2:var(--blue-700);--seq-3:var(--blue-600);--seq-4:var(--blue-500);--seq-5:var(--blue-300);
  --grad-primary:linear-gradient(100deg,#1A5B96 0%,#3671B8 100%);/* @kind color */
  --grad-primary-hover:linear-gradient(100deg,#22699F 0%,#4180C7 100%);/* @kind color */
  --wash-hero:none;/* @kind color */--wash-panel:none;/* @kind color */--wash-edge:none;/* @kind color */
  --csi-1-fill:#23272E;--csi-1-edge:#333A44;--csi-1-text:#A3ACB9;--csi-1-mark:#5A6472;
  --csi-2-fill:#0E3A32;--csi-2-edge:#175448;--csi-2-text:#7FD2BC;--csi-2-mark:#2C9077;
  --csi-3-fill:#12695A;--csi-3-edge:#1A8571;--csi-3-text:#CBF0E5;--csi-3-mark:#38B79B;
  --csi-4-fill:#1FBF9F;--csi-4-edge:#34D6B5;--csi-4-text:#052620;--csi-4-mark:#63DDC2;
  --ok-fill:#0E2A1D;--ok-border:#1E5638;--ok-text:#7FD9A8;--ok-emph:#1E7A4C;
  --warn-fill:#2C2210;--warn-border:#5C4614;--warn-text:#E9C377;
  --danger-fill:#2E1512;--danger-border:#5E2A24;--danger-text:#F0A79F;
  --info-fill:#12283D;--info-border:#1E3F5E;--info-text:#9CC7EC;

  /* importance ramp on dark ground — see the :root block above for what each stop
     is for. Same five hues, re-struck so `text` stays AA on `fill` and `mark`
     clears 3:1 against the dark meter rail (--surface-3). */
  --imp-1-fill:#23272E;--imp-1-edge:#333A44;--imp-1-text:#A3ACB9;--imp-1-mark:#8892A0;
  --imp-2-fill:#12283D;--imp-2-edge:#1E3F5E;--imp-2-text:#9CC7EC;--imp-2-mark:#6FA8E8;
  --imp-3-fill:#221C3D;--imp-3-edge:#372E5C;--imp-3-text:#BFB4F2;--imp-3-mark:#9B8DE0;
  --imp-4-fill:#2C2210;--imp-4-edge:#5C4614;--imp-4-text:#E9C377;--imp-4-mark:#E0A93F;
  --imp-5-fill:#2E1512;--imp-5-edge:#5E2A24;--imp-5-text:#F0A79F;--imp-5-mark:#E2756B;

  /* EntityRow — see the :root block above. On dark ground the hairline does even
     more of the work (1.56:1 against the panel), since --surface-2 and --surface
     sit only 1.09:1 apart here too. A dark red row fill cannot separate from a
     near-black panel by luminance, so the danger row reads by border and hue. */
  --erow-border:#333A44;
  --erow-border-hover:#4A5260;
  --erow-danger-fill:#331813;
  --erow-danger-border:#7A342C;
  --erow-danger-text:#F0A79F;

  /* Solid icon button — see the :root block above. On dark ground a dark fill cannot
     separate from a near-black card, so the fills go LIGHT and the ink goes dark, and
     hover steps lighter rather than darker, pressed a step darker. In every state the dark
     ink on the fill is 4.80:1 or better (the weakest is ok pressed) and the fill is 4.76:1
     or better against --surface-2 (#1B1F27), --erow-danger-fill (#331813) and --surface
     (the weakest is danger pressed on a danger row). */
  --btn-solid-neutral-bg:#6FA8E8;--btn-solid-neutral-bg-hover:#8FBEF0;--btn-solid-neutral-bg-active:#5A98DE;--btn-solid-neutral-ink:#0B1B2A;
  --btn-solid-ok-bg:#3FB37A;--btn-solid-ok-bg-hover:#57C68C;--btn-solid-ok-bg-active:#35A26D;--btn-solid-ok-ink:#0B2A1B;
  --btn-solid-danger-bg:#E8776D;--btn-solid-danger-bg-hover:#F08A80;--btn-solid-danger-bg-active:#D9685E;--btn-solid-danger-ink:#2A0B08;

  /* Soft icon button — see the :root block above. On dark ground the direction flips the
     same way --btn-solid-* already does: a lighter fill cannot separate from a near-black
     card by luminance, so the soft fill goes DARKER and saturated (not lighter, the way
     light theme reads "lighter") with a light ink and a lighter border drawn around it —
     the same "still a button, one step down from --btn-solid-*" relationship, expressed in
     whichever direction actually clears the floor on this ground. Measured against
     --surface-2 (#1B1F27) and --erow-danger-fill (#331813): white ink is 5.4:1 or better,
     the fill is 3.0:1 or better against either ground, and the border (the theme's own
     --btn-solid-*-bg, already proven legible here) is 1.9:1+ off the fill and 5.7:1+ off
     both grounds.

     MP-114 hover/active: rest is already only ~3.0:1 off --surface-2, the floor, so
     darkening further (the light-theme direction) would drop the fill below 3:1 — both
     states have to LIGHTEN here instead, same direction as --btn-solid-* on this ground.
     -bg-hover is +6% toward white, -bg-active +9%/+12% (ok/danger): white ink stays
     4.61:1+ and the fill stays 3.30:1+ against both --surface-2 and --erow-danger-fill at
     every step. Real fills, not `filter: brightness()` — see the :root comment above. */
  --btn-soft-ok-bg:#007A3D;--btn-soft-ok-bg-hover:#0F8249;--btn-soft-ok-bg-active:#17864E;--btn-soft-ok-border:#3FB37A;--btn-soft-ok-ink:#FFFFFF;
  --btn-soft-danger-bg:#D41200;--btn-soft-danger-bg-hover:#D7200F;--btn-soft-danger-bg-active:#D92E1F;--btn-soft-danger-border:#E8776D;--btn-soft-danger-ink:#FFFFFF;

  /* chat kit — see the :root block above */
  --chat-code-bg:#12151B;
  --code-kw:#B3A6F0;--code-str:#E9C377;--code-num:#EFA8BE;--code-com:#6C7686;
  --code-fn:#8FBEF0;--code-type:#A0C9E8;--code-prop:#80BFE9;--code-lit:#F0A79F;--code-pun:#8892A0;
  --diff-add-bg:#0E2A1D;--diff-add-text:#7FD9A8;--diff-del-bg:#2E1512;--diff-del-text:#F0A79F;

}

/* ============ tokens/typography.css ============ */
:root{
  --w-light:300;/* @kind font */
  --w-regular:400;/* @kind font */
  --w-medium:500;/* @kind font */
  --w-semibold:600;/* @kind font */
  --w-bold:700;/* @kind font */
  --w-black:800;/* @kind font */

  --display-1-size:72px;/* @kind font */
  --display-1-lh:1.03;/* @kind font */
  --display-1-track:-.03em;/* @kind font */
  --display-2-size:56px;/* @kind font */
  --display-2-lh:1.06;/* @kind font */
  --display-2-track:-.03em;/* @kind font */
  --display-3-size:40px;/* @kind font */
  --display-3-lh:1.12;/* @kind font */
  --display-3-track:-.02em;/* @kind font */
  --h1-size:30px;/* @kind font */
  --h1-lh:1.2;/* @kind font */
  --h1-track:-.02em;/* @kind font */
  --h2-size:24px;/* @kind font */
  --h2-lh:1.28;/* @kind font */
  --h2-track:-.015em;/* @kind font */
  --h3-size:19px;/* @kind font */
  --h3-lh:1.35;/* @kind font */
  --h3-track:-.01em;/* @kind font */
  --h4-size:16px;/* @kind font */
  --h4-lh:1.4;/* @kind font */
  --h4-track:-.005em;/* @kind font */
  --body-lg-size:17px;/* @kind font */
  --body-lg-lh:1.6;/* @kind font */
  --body-size:15px;/* @kind font */
  --body-lh:1.55;/* @kind font */
  --body-sm-size:13.5px;/* @kind font */
  --body-sm-lh:1.5;/* @kind font */
  --label-lg-size:13px;/* @kind font */
  --label-lg-lh:1.3;/* @kind font */
  --label-lg-track:.01em;/* @kind font */
  --label-size:12px;/* @kind font */
  --label-lh:1.25;/* @kind font */
  --label-track:.02em;/* @kind font */
  --overline-size:11px;/* @kind font */
  --overline-lh:1.2;/* @kind font */
  --overline-track:.09em;/* @kind font */
  --num-hero-size:44px;/* @kind font */
  --num-hero-lh:1;/* @kind font */
  --num-hero-track:-.02em;/* @kind font */
  --num-size:15px;/* @kind font */
  --num-lh:1.4;/* @kind font */
  --mono-size:12.5px;/* @kind font */
  --mono-lh:1.5;/* @kind font */

  --measure-prose:68ch;/* @kind spacing */
  --measure-lede:52ch;/* @kind spacing */
}

/* ============ tokens/space.css ============ */
:root{
  --s-0:0px;--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-12:12px;--s-16:16px;
  --s-20:20px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;--s-64:64px;
  --s-80:80px;--s-96:96px;--s-128:128px;
  --s-xs:var(--s-4);--s-sm:var(--s-8);--s-md:var(--s-12);--s-lg:var(--s-16);
  --s-xl:var(--s-24);--s-2xl:var(--s-32);--s-3xl:var(--s-48);--s-4xl:var(--s-64);

  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-3xl:32px;--r-full:999px;
}

/* ============ tokens/elevation.css ============ */
:root{
  --e-0:none;/* @kind shadow */
  --e-1:0 1px 2px rgba(11,17,28,.05),0 1px 3px rgba(11,17,28,.04);
  --e-2:0 2px 4px rgba(11,17,28,.05),0 6px 16px rgba(11,17,28,.06);
  --e-3:0 8px 20px rgba(11,17,28,.08),0 20px 48px rgba(11,17,28,.10);
  --e-4:0 16px 32px rgba(11,17,28,.10),0 40px 80px rgba(11,17,28,.14);
  --e-brand:0 2px 6px rgba(26,91,150,.28);
  --e-inset:inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="dark"]{
  --e-1:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  --e-2:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  --e-3:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  --e-4:0 24px 64px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
  --e-inset:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ============ tokens/motion.css ============ */
:root{
  --dur-instant:80ms;/* @kind other */
  --dur-fast:120ms;/* @kind other */
  --dur-base:180ms;/* @kind other */
  --dur-slow:260ms;/* @kind other */
  --dur-panel:340ms;/* @kind other */
  --ease:cubic-bezier(.2,0,0,1);/* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);/* @kind other */
  --skeleton-dur:1400ms;/* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:40ms;/* @kind other */--dur-fast:80ms;/* @kind other */--dur-base:120ms;/* @kind other */--dur-slow:160ms;/* @kind other */--dur-panel:200ms;/* @kind other */--skeleton-dur:0ms/* @kind other */}
}

/* ============ tokens/appearance.css ============ */
/* MP-208 — the [data-text-scale]/[data-contrast]/[data-motion] rules AppearanceMenu
   (components/platform/AppearanceMenu.tsx) and its store (kits/appearance.ts) drive by
   setting attributes on document.documentElement. Consolidated from this repo's own
   docs-site demo (text scale, high contrast) and media-planner's local copy (adds the
   reduced-motion override) — every consuming app gets all three from importing this
   stylesheet alone, none of it re-implemented per app. */

/* Text scale: a zoom multiplier, same mechanism the pre-MP-208 copies used (JS-set
   body.style.zoom) but expressed as a CSS token+rule pair instead, so no per-app JS is
   needed to apply it. "md" is 100% — the default, absent-attribute case below. */
:root{--text-scale-zoom:1;/* @kind other */}
:root[data-text-scale="sm"]{--text-scale-zoom:.9;/* @kind other */}
:root[data-text-scale="lg"]{--text-scale-zoom:1.15;/* @kind other */}
:root[data-text-scale="xl"]{--text-scale-zoom:1.3;/* @kind other */}
body{zoom:var(--text-scale-zoom);}

/* High contrast: sharpen the two tokens that carry most of the system's "quiet" UI —
   hairline borders and secondary/muted text — up to the next, stronger step the theme
   already defines for both light and dark (this file's colors.css section above). Also
   widens the focus ring so keyboard focus reads unmistakably against every surface. */
[data-contrast="high"]{
  --border:var(--border-strong);
  --text-muted:var(--text-2);
  --focus-ring:0 0 0 2px var(--page),0 0 0 4px var(--text);
}

/* Reduced motion: forces every duration token above down to (near) zero, regardless of
   the OS setting — this can only ever ADD reduced motion on top of the
   `prefers-reduced-motion` floor already applied above, never remove it, since that
   media query keeps applying underneath this attribute. */
[data-motion="reduce"]{
  --dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-panel:0ms;--skeleton-dur:0ms;
}
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after{
  animation-duration:.001ms!important;
  animation-delay:0ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}

/* ============ tokens/layout.css ============ */
:root{
  --sidebar-w:264px;/* @kind spacing */
  --sidebar-w-collapsed:72px;/* @kind spacing */
  --topbar-h:60px;/* @kind spacing */
  --content-max:1440px;/* @kind spacing */
  --marketing-max:1200px;/* @kind spacing */
  --gutter:24px;/* @kind spacing */
  --gutter-lg:32px;/* @kind spacing */
  --bp-sm:640px;/* @kind spacing */
  --bp-md:768px;/* @kind spacing */
  --bp-lg:1024px;/* @kind spacing */
  --bp-xl:1280px;/* @kind spacing */
  --bp-2xl:1536px;/* @kind spacing */
  --hit-product:36px;/* @kind spacing */
  --hit-touch:44px;/* @kind spacing */
  --control-h-sm:34px;/* @kind spacing */
  --control-h-md:44px;/* @kind spacing */
  --control-h-lg:52px;/* @kind spacing */
}