/* Pairwise design tokens: one source for type, spacing, colour, charts and motion across the app, sign-in and
   business landing pages. Businesses change --accent and the skin; everything else derives from these. */
@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  /* Type: Manrope everywhere, with a small fixed scale. Nothing below 12px. */
  --font: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fw-regular: 450;
  --fw-medium: 560;
  --fw-semibold: 650;
  --fw-bold: 750;
  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;

  /* Spacing on a 4px grid. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Surfaces and ink (light). Muted and faint text both pass WCAG AA on white. */
  --accent: #3978cf;
  --on-accent: #fff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 82%, #000);
  --bg: #f4f6fb;
  --surface: #fff;
  --surface-2: #f8fafd;
  --surface-3: #f1f4f9;
  --text: #0f1b2d;
  --text-2: #334155;
  --muted: #5b6b82;
  --faint: #687589;
  --border: #e6eaf2;
  --border-strong: #d6dce8;

  /* Status: reserved for state, always paired with an icon or label, never used as a chart series. */
  --green: #16805f;
  --amber: #a46412;
  --red: #c0392b;
  --purple: #7c4fb0;
  --blue: #2f6fd0;
  --teal: #0f8a83;
  --ok: var(--green);
  --warn: var(--amber);
  --danger: var(--red);
  --info: var(--blue);
  --ok-soft: color-mix(in srgb, var(--ok) 12%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 11%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 11%, transparent);

  /* Charts. One series uses the business accent; several use these validated slots in this fixed order
     (validated for colour-vision deficiency on adjacent pairs; see docs/design-system.md). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --series-other: #a3adbb;
  --chart-grid: color-mix(in srgb, var(--border) 80%, transparent);
  --chart-axis: var(--faint);

  /* Shape and depth. */
  --r-xl: 18px;
  --r-lg: 14px;
  --r: 12px;
  --r-sm: 9px;
  --r-xs: 7px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.18);
  --shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.05);
  --ring: 0 0 0 3px var(--accent-soft-2);

  /* Motion: quick and calm. Everything is switched off under prefers-reduced-motion. */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout. */
  --sidebar: 248px;
  --sidebar-collapsed: 76px;
  --topbar: 68px;

  font-family: var(--font);
  font-size: var(--fs-base);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark ink and surfaces: the midnight skin, the viewer's dark theme, or the system setting when the viewer
   chose "system". Series step to the dark surface rather than flipping automatically. */
:root[data-skin='midnight'],
:root[data-theme='dark'] {
  --bg: #0f1622;
  --surface: #172131;
  --surface-2: #1d293c;
  --surface-3: #233147;
  --border: #2b3a52;
  --border-strong: #3a4b66;
  --text: #eef3fb;
  --text-2: #cdd7e6;
  --muted: #a3b2c7;
  --faint: #8a9bb3;
  --green: #5fd0a6;
  --amber: #f0c27a;
  --red: #ff8a7a;
  --purple: #c4a6ef;
  --blue: #7fb0f5;
  --teal: #4fd1c5;
  --accent-ink: color-mix(in srgb, var(--accent) 60%, #fff);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #5d6b80;
  --shadow-sm: 0 1px 2px #0004;
  --shadow-md: 0 8px 24px #0006;
  --shadow-lg: 0 24px 60px #000a;
  --shadow-hover: 0 12px 30px #0007;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    --bg: #0f1622;
    --surface: #172131;
    --surface-2: #1d293c;
    --surface-3: #233147;
    --border: #2b3a52;
    --border-strong: #3a4b66;
    --text: #eef3fb;
    --text-2: #cdd7e6;
    --muted: #a3b2c7;
    --faint: #8a9bb3;
    --green: #5fd0a6;
    --amber: #f0c27a;
    --red: #ff8a7a;
    --purple: #c4a6ef;
    --blue: #7fb0f5;
    --teal: #4fd1c5;
    --accent-ink: color-mix(in srgb, var(--accent) 60%, #fff);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-other: #5d6b80;
    --shadow-sm: 0 1px 2px #0004;
    --shadow-md: 0 8px 24px #0006;
    --shadow-lg: 0 24px 60px #000a;
    --shadow-hover: 0 12px 30px #0007;
    color-scheme: dark;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}