/* Design tokens: every color, size and timing of the dashboard lives here. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-num: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 650;
  --leading: 1.45;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --sidebar-width: 232px;
  --content-max: 1080px;
  --tile-min: 220px;
  --field-width: 160px;
  --switch-w: 38px;
  --switch-h: 22px;
  --switch-knob: 18px;
  --dot: 8px;
  --border-w: 1px;
  --focus-w: 3px;
  /* The mobile breakpoint is 760px; media queries cannot read tokens, app.css repeats it. */
  --reg-min: 300px;
  /* Longest Mail account name measured 2026-10-18: 20 characters. */
  --account-col: 21ch;
  --dialog-max: 520px;
  --badge-pad-y: 2px;
  --caps-tracking: 0.04em;

  --dur-fast: 120ms;
  --dur-med: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-sunken: #eef0f3;
  --sidebar-bg: #ececef;
  --border: #dcdde1;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --accent: #0a66d8;
  --accent-text: #ffffff;
  --accent-soft: #e3eefc;
  --ok: #1f8a3b;
  --ok-soft: #e2f4e6;
  --warn: #a35a00;
  --warn-soft: #fbefdc;
  --bad: #c42b1c;
  --bad-soft: #fbe5e2;
  --switch-off: #c7c7cc;
  --knob: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
  --overlay: rgba(0, 0, 0, 0.35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161618;
    --surface: #1f1f22;
    --surface-sunken: #29292d;
    --sidebar-bg: #1b1b1e;
    --border: #36363b;
    --text: #f2f2f4;
    --text-muted: #a1a1a8;
    --accent: #4c9bff;
    --accent-text: #0b1220;
    --accent-soft: #1d2d45;
    --ok: #4cc96b;
    --ok-soft: #173322;
    --warn: #f0a543;
    --warn-soft: #3a2a12;
    --bad: #ff6b5c;
    --bad-soft: #3d1c19;
    --switch-off: #48484e;
    --knob: #f2f2f4;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --overlay: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}