/* Maestro Cloud design tokens, shared with FIOS (人生管理系统): warm neutral
   surfaces, white panels, one green accent. Flat colour only: no gradients.
   Each domain sets --h (hue) and --s (saturation) inline; every accent shade is derived
   from them, and [style*="--h"] re-derives the shades wherever a domain overrides the hue. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --bg: #f4f4f1;
  --bg-2: #ecebe7;
  --surface: #ffffff;
  --surface-2: #f9f9f7;
  --surface-3: #f0efeb;
  --ink: #17181a;
  --ink-2: #44464a;
  --muted: #7b7e83;
  --faint: #b3b5b8;
  --line: rgba(23, 24, 26, 0.08);
  --line-2: rgba(23, 24, 26, 0.14);
  --scrim: rgba(17, 18, 20, 0.34);

  --shadow-sm: 0 1px 2px rgba(17, 18, 20, 0.05);
  --shadow: 0 1px 2px rgba(17, 18, 20, 0.04);
  --shadow-hover: 0 1px 2px rgba(17, 18, 20, 0.05), 0 6px 16px -8px rgba(17, 18, 20, 0.16);
  --shadow-lg: 0 24px 60px -20px rgba(17, 18, 20, 0.32), 0 2px 8px rgba(17, 18, 20, 0.06);

  --radius: 14px;
  --radius-md: 11px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Status colours: meaning only, never a data series. */
  --good: #1f8a4c;
  --good-soft: #e6f4ec;
  --bad: #c9372c;
  --bad-soft: #fbeae8;
  --warn: #b7700b;
  --warn-soft: #fbf1df;

  /* Chart chrome and the categorical series, in fixed order (validated for colour-blind readers). */
  --chart-grid: #ecebe6;
  --chart-axis: #d5d4ce;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100;
  --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948;

  /* Notion-style option colours */
  --c-default: #5f6368; --c-default-bg: #efefec;
  --c-gray: #6c7075; --c-gray-bg: #eeeeeb;
  --c-brown: #8a5d45; --c-brown-bg: #f4ece7;
  --c-orange: #c15e0e; --c-orange-bg: #fcefe2;
  --c-yellow: #9c7310; --c-yellow-bg: #faf2d9;
  --c-green: #2a7a4f; --c-green-bg: #e5f3ea;
  --c-blue: #2a6c9a; --c-blue-bg: #e4f0f8;
  --c-purple: #7650a1; --c-purple-bg: #f2ecf8;
  --c-pink: #ad3d78; --c-pink-bg: #faeaf2;
  --c-red: #bf3d37; --c-red-bg: #fbe8e7;

  --h: 152;
  --s: 55%;
  --sidebar: 236px;
  --topbar: 54px;
  color-scheme: light;
}

:root,
[style*="--h"] {
  --accent: hsl(var(--h) var(--s) 40%);
  --accent-2: var(--accent);
  --accent-strong: hsl(var(--h) var(--s) 33%);
  --accent-soft: hsl(var(--h) 55% 96%);
  --accent-soft-2: hsl(var(--h) 48% 91%);
  --accent-ink: hsl(var(--h) 50% 28%);
  --accent-line: hsl(var(--h) 38% 84%);
  --accent-glow: hsl(var(--h) 70% 50% / 0.18);
  --on-accent: #fff;
  /* single-hue ramp for heatmaps: near zero recedes toward the track */
  --ramp-0: var(--surface-3);
  --ramp-1: color-mix(in oklab, var(--accent) 22%, var(--surface-3));
  --ramp-2: color-mix(in oklab, var(--accent) 45%, var(--surface-3));
  --ramp-3: color-mix(in oklab, var(--accent) 72%, var(--surface-3));
  --ramp-4: var(--accent-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111212;
    --bg-2: #161717;
    --surface: #1b1c1c;
    --surface-2: #202121;
    --surface-3: #282929;
    --ink: #ecedec;
    --ink-2: #c2c4c3;
    --muted: #8d908f;
    --faint: #5c5f5e;
    --line: rgba(255, 255, 255, 0.075);
    --line-2: rgba(255, 255, 255, 0.13);
    --scrim: rgba(0, 0, 0, 0.56);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
    --good: #4cc27f; --good-soft: #1a2e22;
    --bad: #f07466; --bad-soft: #36201d;
    --warn: #e2a849; --warn-soft: #33291a;
    --chart-grid: #2a2b2b;
    --chart-axis: #3a3b3b;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
    --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    --c-default: #bcc0be; --c-default-bg: #2a2c2b;
    --c-gray: #b0b4b2; --c-gray-bg: #2b2d2c;
    --c-brown: #d2a58c; --c-brown-bg: #352b25;
    --c-orange: #f0a35e; --c-orange-bg: #3a2a1b;
    --c-yellow: #e2c061; --c-yellow-bg: #353019;
    --c-green: #7fcf9f; --c-green-bg: #1e3226;
    --c-blue: #7bbbe3; --c-blue-bg: #1b2d3a;
    --c-purple: #c2a2e4; --c-purple-bg: #2e2638;
    --c-pink: #ee96c5; --c-pink-bg: #392230;
    --c-red: #f08a83; --c-red-bg: #3a2221;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) [style*="--h"] {
    --accent: hsl(var(--h) var(--s) 62%);
    --accent-strong: hsl(var(--h) calc(var(--s) + 5%) 70%);
    --accent-soft: hsl(var(--h) 22% 16%);
    --accent-soft-2: hsl(var(--h) 24% 22%);
    --accent-ink: hsl(var(--h) 60% 78%);
    --accent-line: hsl(var(--h) 22% 29%);
    --accent-glow: hsl(var(--h) 70% 55% / 0.2);
    --on-accent: hsl(var(--h) 40% 9%);
  }
}

:root[data-theme="dark"] {
  --bg: #111212;
  --bg-2: #161717;
  --surface: #1b1c1c;
  --surface-2: #202121;
  --surface-3: #282929;
  --ink: #ecedec;
  --ink-2: #c2c4c3;
  --muted: #8d908f;
  --faint: #5c5f5e;
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.13);
  --scrim: rgba(0, 0, 0, 0.56);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
  --good: #4cc27f; --good-soft: #1a2e22;
  --bad: #f07466; --bad-soft: #36201d;
  --warn: #e2a849; --warn-soft: #33291a;
  --chart-grid: #2a2b2b;
  --chart-axis: #3a3b3b;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
  --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --c-default: #bcc0be; --c-default-bg: #2a2c2b;
  --c-gray: #b0b4b2; --c-gray-bg: #2b2d2c;
  --c-brown: #d2a58c; --c-brown-bg: #352b25;
  --c-orange: #f0a35e; --c-orange-bg: #3a2a1b;
  --c-yellow: #e2c061; --c-yellow-bg: #353019;
  --c-green: #7fcf9f; --c-green-bg: #1e3226;
  --c-blue: #7bbbe3; --c-blue-bg: #1b2d3a;
  --c-purple: #c2a2e4; --c-purple-bg: #2e2638;
  --c-pink: #ee96c5; --c-pink-bg: #392230;
  --c-red: #f08a83; --c-red-bg: #3a2221;
  color-scheme: dark;
}
:root[data-theme="dark"],
:root[data-theme="dark"] [style*="--h"] {
  --accent: hsl(var(--h) var(--s) 62%);
  --accent-strong: hsl(var(--h) calc(var(--s) + 5%) 70%);
  --accent-soft: hsl(var(--h) 22% 16%);
  --accent-soft-2: hsl(var(--h) 24% 22%);
  --accent-ink: hsl(var(--h) 60% 78%);
  --accent-line: hsl(var(--h) 22% 29%);
  --accent-glow: hsl(var(--h) 70% 55% / 0.2);
  --on-accent: hsl(var(--h) 40% 9%);
}