/* Theme tokens for the dashboard.
   Every colour, font, radius and spacing value the components use comes from here. A partner
   (white-label) theme only needs to override these variables. Components must never hard-code a
   colour. Charts read the same variables at render time (see media/js/core/charts.js). */

:root {
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-md: 0.875rem;   /* 14 */
  --text-lg: 1rem;       /* 16 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 2rem;      /* 32 */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --sidebar-width: 240px;
  --rail-width: 320px;
  --content-max: 1680px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 180ms;
}

/* Dark is the default theme: it is what the client's design is built on. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #060d21;
  --bg-glow: rgba(58, 107, 255, 0.14);
  --surface: #0b1530;
  --surface-raised: #101c3c;
  --surface-sunken: #08112a;
  --line: #1a2850;
  --line-strong: #263a6c;

  --text: #eaf0ff;
  --text-muted: #8f9cc6;
  --text-faint: #5d6a93;

  --brand: #3a6bff;
  --brand-strong: #5a84ff;
  --brand-soft: rgba(58, 107, 255, 0.16);
  --on-brand: #ffffff;

  --violet: #7d5cff;
  --teal: #22c2d9;
  --orange: #f5953a;
  --green: #2ec27a;
  --red: #f2566b;
  --amber: #f5bd3d;

  --positive: var(--green);
  --negative: var(--red);

  --card-highlight: rgba(255, 255, 255, 0.035);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(1, 5, 18, 0.45);
  --skeleton-base: #122047;
  --skeleton-shine: #1a2c5c;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-strong);
  scrollbar-color: #527eff #08112a;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f1f4fb;
  --bg-glow: rgba(58, 107, 255, 0.08);
  --surface: #ffffff;
  --surface-raised: #f6f8fe;
  --surface-sunken: #eaeef8;
  --line: #e0e6f3;
  --line-strong: #c9d3ea;

  --text: #0d1736;
  --text-muted: #55618a;
  --text-faint: #8a94b5;

  --brand: #2f5bef;
  --brand-strong: #2049d6;
  --brand-soft: rgba(47, 91, 239, 0.1);
  --on-brand: #ffffff;

  --violet: #6a45f0;
  --teal: #0f9fb6;
  --orange: #e07a17;
  --green: #17a463;
  --red: #dc3d54;
  --amber: #d99a0b;

  --card-highlight: rgba(255, 255, 255, 0);
  --card-shadow: 0 1px 2px rgba(13, 23, 54, 0.05), 0 8px 24px rgba(13, 23, 54, 0.06);
  --skeleton-base: #e8edf8;
  --skeleton-shine: #f4f6fc;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
  scrollbar-color: auto;  
}

/* Chart series colours, in fixed slot order. Validated per theme for colour-blind separation and
   contrast against the card surface; change them only by re-running that validation. A slot
   always means the same thing on a chart (see ACTIVITY_SLOTS in media/js/data/metrics.js). */
:root,
:root[data-theme="dark"] {
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
  --chart-7: #9085e9;
  --chart-8: #e66767;
  --chart-other: #5d6a93;
}

:root[data-theme="light"] {
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;
  --chart-other: #a3acc6;
}