/* Design tokens. One accent; status colours are quiet and never fill a panel. */
:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-sheet: "Times New Roman", Times, "Liberation Serif", serif;

  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #ececf0;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --fill-quiet: rgba(118, 118, 128, 0.12);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --hairline: rgba(0, 0, 0, 0.09);
  --hairline-strong: rgba(0, 0, 0, 0.16);

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --accent-text: #0066cc;
  --on-accent: #ffffff;

  --ok: #248a3d;
  --ok-soft: rgba(36, 138, 61, 0.1);
  --review: #b25000;
  --review-soft: rgba(255, 149, 0, 0.13);
  --blocked: #636366;
  --blocked-soft: rgba(99, 99, 102, 0.12);
  --fail: #c4302b;
  --fail-soft: rgba(215, 0, 21, 0.08);

  --bar-bg: rgba(250, 250, 252, 0.72);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, 0.03), 0 8px 28px rgba(0, 0, 0, 0.06);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  /* the workbook is paper in both modes */
  --paper: #ffffff;
  --paper-ink: #111111;
  --paper-rule: #d8d8dc;
  --paper-head: #f4f4f6;
  --paper-labor: #ffff00;
  --paper-pack: #d9d9d9;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

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

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --bar-h: 52px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-sunken: #111113;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --fill-quiet: rgba(118, 118, 128, 0.24);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #7c7c82;
    --hairline: rgba(255, 255, 255, 0.1);
    --hairline-strong: rgba(255, 255, 255, 0.18);
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --accent-soft: rgba(10, 132, 255, 0.16);
    --accent-text: #4aa3ff;
    --ok: #30d158;
    --ok-soft: rgba(48, 209, 88, 0.14);
    --review: #ffb340;
    --review-soft: rgba(255, 179, 64, 0.14);
    --blocked: #aeaeb2;
    --blocked-soft: rgba(174, 174, 178, 0.14);
    --fail: #ff6961;
    --fail-soft: rgba(255, 105, 97, 0.12);
    --bar-bg: rgba(22, 22, 24, 0.72);
    --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.5);
    --paper: #f7f7f5;
    --paper-rule: #cfcfd3;
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --bg-sunken: #111113;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --fill-quiet: rgba(118, 118, 128, 0.24);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #7c7c82;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --accent-text: #4aa3ff;
  --ok: #30d158;
  --ok-soft: rgba(48, 209, 88, 0.14);
  --review: #ffb340;
  --review-soft: rgba(255, 179, 64, 0.14);
  --blocked: #aeaeb2;
  --blocked-soft: rgba(174, 174, 178, 0.14);
  --fail: #ff6961;
  --fail-soft: rgba(255, 105, 97, 0.12);
  --bar-bg: rgba(22, 22, 24, 0.72);
  --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.5);
  --paper: #f7f7f5;
  --paper-rule: #cfcfd3;
}