/* Graphite workspace with blue interaction states. */
:root {
  color-scheme: dark;
  --bg: #151516;
  --sidebar: #1b1b1d;
  --card: #242426;
  --ink: #f1f2f5;
  --sub: #c0c2ca;
  --muted: #a1a4ae;
  --line: #38383d;
  --accent: #82b4ff;
  --accent-hover: #a2c8ff;
  --soft: #303035;
  --lime: #c7dcfd;
  --lime-soft: #273345;
  --pine: #202735;
  --on-pine: #ffffff;
  --on-pine-sub: #bdc8dc;
  --green: #91d8a8;
  --green-soft: #26392f;
  --blue: #83b7ff;
  --blue-soft: #242f42;
  --red: #ffa3aa;
  --red-soft: #402c34;
  --amber: #f3c18c;
  --amber-soft: #3a312a;
  --heat-empty: #38383f;
  --heat-filled: #72a7f2;
  --timer-track: #3b4454;
  --timer-stroke: #82b4ff;
  --font:"HarmonyOS Sans SC","HarmonyOS Sans","PingFang SC","Microsoft YaHei UI",sans-serif;
  --font-numeric:"HarmonyOS Sans SC","HarmonyOS Sans","PingFang SC","Microsoft YaHei UI",sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 17px;
  --text-title: clamp(28px, 2.4vw, 38px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 8px;
  --radius-card: 20px;
  --radius-dialog: 20px;
  --shadow: none;
  --shadow-overlay: 0 20px 56px #0008;
  --sidebar-width: 220px;
  --ease: 180ms cubic-bezier(.2,.7,.2,1);
  --motion-enter: 300ms;
  --motion-exit: 180ms;
  --motion-curve: cubic-bezier(.22,1,.36,1);

  --sidebar-ink: #f1f2f5;
  --sidebar-sub: #c0c2ca;
  --sidebar-muted: #a1a4ae;
  --sidebar-line: #ffffff12;
  --sidebar-hover: #ffffff0c;
  --sidebar-selected: #2e2e33;
  --surface-shadow: none;
  --nav-selected: #2e2e33;
  --focus-surface: #232936;
  --chart-fill: #676f80;
  --scroll-thumb: #50515b;
  --scroll-hover: #727480;
  --scroll-active: #8c8e9a;

  /* Supporting surfaces and interaction states. */
  --nav-hover: #ffffff0c;
  --avatar-surface: #303039;
  --demo-border: var(--line);
  --control-border: #494a53;
  --segment-surface: #2e2e32;
  --neutral-surface: #29292e;
  --divider-strong: #4a4b54;
  --lime-hover: #2e3c53;
  --ring-track: var(--timer-track);
  --history-border: var(--line);
  --icon-surface: #303039;
  --stage-track: #393a42;
  --stage-next: #82b4ff;
  --timer-dark-track: #55554d;
  --timer-mode: #53534b;
  --timer-control-border: #77776d;
  --timer-notice: #44443d;
  --timer-notice-border: #606057;
  --history-divider: var(--line);
  --date-surface: #2b303a;
  --alert-border: #594735;
  --alert-text: #f3c18c;
  --alert-hover-border: #735843;
  --alert-hover: #3a312a;
  --hover-surface: #313136;
  --dialog-footer: #29292d;
  --danger-border: #62404a;
  --option-hover-border: var(--control-border);
  --code-surface: #1c1c20;
  --shadow-segment: #0003;
  --scrim: #08080bb8;
  --accent-ink: var(--accent);
  --accent-bright: #a4ccff;
  --action: var(--accent);
  --action-hover: var(--accent-hover);
  --on-action: #12223a;
  --progress: #71a8fa;
  --selection-border: #4a6385;
  --accent-surface: #26364e;
  --terracotta: var(--amber);
  --peach: #86b6ff;
  /* Compatibility alias for the existing semantic action class names. */
  --purple: var(--ink);
}