/* Planar design tokens. The only place colors, sizes and type live.
   Two themes: Tokyo Night (dark) and Tokyo Night Day (light).
   <html data-theme="tokyo-night|tokyo-night-day">; "system" is resolved
   to one of them by /static/theme.js before first paint. */
:root, [data-theme="tokyo-night"] {
  --wall: #111219;
  --bg: #1a1b26;
  --bg2: #16161e;
  --bg3: #1f2335;
  --line: #262a3d;
  --border: #3b4261;
  --fg: #c0caf5;
  --fg2: #a9b1d6;
  --muted: #8a93bd;
  --faint: #565f89;
  --accent: #7aa2f7;
  --sel: #283457;
  --on: #16161e;
  --green: #9ece6a;
  --red: #f7768e;
  --yellow: #e0af68;
  --orange: #ff9e64;
  --magenta: #bb9af7;
  --cyan: #7dcfff;
  --past: #0d0e14;
  --scrim: #0008;
  --shadow: #000a;
  --tint: 14%;
  color-scheme: dark;
}
[data-theme="tokyo-night-day"] {
  --wall: #cdd2e0;
  --bg: #eceef4;
  --bg2: #e3e5ed;
  --bg3: #dde1ec;
  --line: #d3d7e4;
  --border: #adb4d0;
  --fg: #2f3552;
  --fg2: #4c5a8a;
  --muted: #596280;
  --faint: #8e97b8;
  --accent: #255fb1;
  --sel: #dbe2f6;
  --on: #ffffff;
  --green: #456c26;
  --red: #bc1c47;
  --yellow: #785d34;
  --orange: #9a4d00;
  --magenta: #7841d2;
  --cyan: #006b8d;
  --past: #c9cedd;
  --scrim: #1a1b2666;
  --shadow: #2f355240;
  --tint: 9%; /* lighter tints keep colored label text above 4.5:1 */
  color-scheme: light;
}

:root {
  /* roles */
  --tag-person: var(--cyan);
  --tag-project: var(--magenta);
  --tag-customer: var(--orange);
  --status-ok: var(--green);
  --status-due: var(--yellow);
  --status-late: var(--red);

  /* type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-title: 22px;      /* page titles (mono 700) and task titles (sans 650) */
  --fs-lead: 16px;       /* list rows */
  --fs-body: 15px;       /* reading text: notes, answers */
  --fs-small: 13px;      /* meta lines, buttons, section headings */
  --fs-label: 12px;      /* due, small chips */
  --fs-micro: 11px;      /* strip times */
  --lh: 1.5;
  --lh-tight: 1.25;
  --tracking-caps: 0.06em;

  /* space (4px grid, plus 10 for tile gaps) */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-7: 14px;
  --s-8: 16px;
  --s-9: 20px;
  --s-10: 24px;
  --s-11: 32px;

  /* shape */
  --r-1: 2px;    /* chips, checkboxes */
  --r-2: 3px;    /* buttons, inputs, rows */
  --r-3: 5px;    /* tiles */
  --hair: 1px;
  --bar: 2px;    /* colored edges, focus ring */
  --edge: 3px;   /* event and suggestion edges */

  /* layout */
  --gap: 10px;
  --h-strip: 100px;
  --w-rail: 64px;
  --w-list: 420px;
  --w-agent: 460px;      /* beside a list and an open task */
  --w-agent-wide: 520px; /* beside a list alone */
  --w-agent-max: 760px;  /* "wider" */
  --w-read: 880px;       /* a list's rows never run wider than this */
  --w-date: 172px;
  --w-field-key: 96px;
  --w-palette: 640px;
  --w-toast: 360px;
  --w-login: 380px;
  --w-dialog: 520px;
  --h-row: 44px;
  --h-control: 32px;
  --h-control-sm: 26px;
  --h-rail-item: 50px;
  --w-rail-item: 52px;
  --size-box: 16px;
  --size-ini: 34px;
  --size-ini-sm: 22px;
  --size-ini-lg: 50px;
  --h-event: 50px;
  --top-palette: 14vh;

  /* tints (--tint, per theme above): share of a hue mixed into the ground */

  /* motion */
  --t-fast: 120ms;
  --t-med: 200ms;
}

/* sizes that change with the viewport (breakpoints match app.css) */
@media (max-width: 90em) {
  :root { --w-agent: 420px; --w-agent-wide: 480px; --w-list: 380px; }
}
@media (max-width: 53.75em) {
  :root { --h-strip: 128px; }
}
@media (max-width: 37.5em) {
  :root { --gap: 6px; --h-event: 44px; }
}