/* Design tokens. Neutrals, series and status colours come from the validated reference palette (dataviz skill).
   --accent* are set at runtime from the active business's brand colour (see js/lib/theme.js). */
:root {
  color-scheme: light;
  --page: #f7f6f3;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --surface-3: #eae8e2;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #6f6d68;      /* muted text: >= 4.5:1 on --surface */
  --ink-4: #898781;      /* axis labels, placeholders */
  --line: #e1e0d9;
  --line-strong: #c9c8bf;
  --border: rgba(11, 11, 11, 0.10);
  --overlay: rgba(14, 14, 12, 0.48);

  --accent: #be185d;
  --accent-solid: #be185d;
  --accent-ink: #ffffff;
  --accent-text: #be185d;
  --accent-soft: color-mix(in oklab, var(--accent) 10%, var(--surface));
  --accent-soft-2: color-mix(in oklab, var(--accent) 18%, var(--surface));
  --ring: color-mix(in oklab, var(--accent) 38%, transparent);

  --good: #0ca30c;  --good-ink: #006300;  --good-bg: #e6f6e6;
  --warn: #fab219;  --warn-ink: #7a4b00;  --warn-bg: #fff3d6;
  --serious: #ec835a;
  --danger: #d03b3b; --danger-ink: #b42323; --danger-bg: #fdeaea;
  --info: #2a78d6;  --info-ink: #1c5cab;  --info-bg: #e8f1fc;

  /* categorical series (validated: dataviz palette, light surface #fcfcfb) */
  --series-1: #2a78d6; /* revenue, cash in */
  --series-2: #eb6834; /* expenses, cash out */
  --series-3: #1baf7a; /* profit, net */
  --series-4: #eda100;
  --series-muted: #c9c8bf;
  --grid: #e1e0d9;
  --axis: #c3c2b7;

  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 6px 20px rgba(11, 11, 11, 0.10);
  --shadow-3: 0 18px 50px rgba(11, 11, 11, 0.22);

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 252px; --sidebar-w-collapsed: 68px; --topbar-h: 58px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --surface-3: #2e2e2b;
    --ink: #ffffff; --ink-2: #c3c2b7; --ink-3: #a2a097; --ink-4: #898781;
    --line: #2c2c2a; --line-strong: #43433f; --border: rgba(255, 255, 255, 0.10); --overlay: rgba(0, 0, 0, 0.62);
    --good: #0ca30c; --good-ink: #4cc94c; --good-bg: rgba(12, 163, 12, 0.16);
    --warn-ink: #f6c452; --warn-bg: rgba(250, 178, 25, 0.15);
    --danger: #e66767; --danger-ink: #f08a8a; --danger-bg: rgba(230, 103, 103, 0.16);
    --info: #3987e5; --info-ink: #7db3f2; --info-bg: rgba(57, 135, 229, 0.16);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-muted: #43433f;
    --grid: #2c2c2a; --axis: #383835;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --surface-3: #2e2e2b;
  --ink: #ffffff; --ink-2: #c3c2b7; --ink-3: #a2a097; --ink-4: #898781;
  --line: #2c2c2a; --line-strong: #43433f; --border: rgba(255, 255, 255, 0.10); --overlay: rgba(0, 0, 0, 0.62);
  --good: #0ca30c; --good-ink: #4cc94c; --good-bg: rgba(12, 163, 12, 0.16);
  --warn-ink: #f6c452; --warn-bg: rgba(250, 178, 25, 0.15);
  --danger: #e66767; --danger-ink: #f08a8a; --danger-bg: rgba(230, 103, 103, 0.16);
  --info: #3987e5; --info-ink: #7db3f2; --info-bg: rgba(57, 135, 229, 0.16);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-muted: #43433f;
  --grid: #2c2c2a; --axis: #383835;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);
}