/* Tokens the page reads from the Dashboard type (plan section 2 and 4.3),
   defined here in the Blidz house style. Anthropic's fonts are not copied:
   --font-anthropic-sans points to Clash Grotesk (with system fallbacks) and
   --font-anthropic-serif to a system serif. Lasse's page sets its own colours
   on #dash-root (always dark, Blidz yellow); the values below are the base
   the page builds on, light first with a matching dark mode. */
:root {
  --font-anthropic-sans: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-anthropic-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-anthropic-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cds-font-size-caption: 0.8125rem;
  --cds-font-size-body: 0.9375rem;
  --cds-font-size-heading: 1.125rem;
  --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 500;

  --cds-gap-xs: 0.25rem;
  --cds-gap-sm: 0.5rem;
  --cds-gap-md: 1rem;
  --cds-gap-lg: 1.5rem;
  --cds-gap-xl: 2rem;
  --cds-pad-xs: 0.25rem;
  --cds-pad-sm: 0.5rem;
  --cds-pad-md: 0.75rem;
  --cds-pad-lg: 1rem;
  --cds-pad-xl: 1.5rem;
  --cds-radius: 8px;

  --cds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cds-dur-fast: 120ms;
  --cds-dur-slow: 320ms;

  --color-fg: #111113;
  --color-fg-muted: #5F6168;
  --color-bg: #F7F7F8;
  --color-panel: #FFFFFF;
  --color-border-line: rgba(17, 17, 19, 0.12);
  --color-ok: #1F7A45;
  --color-warn: #8A6D00;
  --color-bad: #B42318;

  --cds-text-secondary: #5F6168;
  --cds-border: rgba(17, 17, 19, 0.16);
  --cds-surface-popover: #FFFFFF;
  --cds-shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.14);
  --cds-chart-grid: rgba(17, 17, 19, 0.08);
  --cds-chart-axis: rgba(17, 17, 19, 0.3);
  --cds-chart-muted: rgba(17, 17, 19, 0.3);
  --cds-chart-reference: rgba(17, 17, 19, 0.55);
  --cds-chart-status-critical: #B42318;

  /* dash.colors: eight series. The page takes 2 to 8 (it sets black and Blidz yellow first itself). */
  --cds-chart-series-1: #FDF853;
  --cds-chart-series-2: #6E8BFF;
  --cds-chart-series-3: #3FC48A;
  --cds-chart-series-4: #FF8A5B;
  --cds-chart-series-5: #B18CFF;
  --cds-chart-series-6: #36C2D6;
  --cds-chart-series-7: #E86FA6;
  --cds-chart-series-8: #A3A7B0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fg: #E9EAEE;
    --color-fg-muted: #9A9EA7;
    --color-bg: #18181A;
    --color-panel: #222225;
    --color-border-line: rgba(233, 234, 238, 0.12);
    --color-ok: #7BE3A6;
    --color-warn: #FDF853;
    --color-bad: #FF8270;
    --cds-text-secondary: #A4A9B2;
    --cds-border: rgba(233, 234, 238, 0.18);
    --cds-surface-popover: #222225;
    --cds-shadow-popover: 0 10px 40px rgba(0, 0, 0, 0.6);
    --cds-chart-grid: rgba(233, 234, 238, 0.07);
    --cds-chart-axis: rgba(233, 234, 238, 0.26);
    --cds-chart-muted: rgba(233, 234, 238, 0.26);
    --cds-chart-reference: rgba(233, 234, 238, 0.55);
    --cds-chart-status-critical: #FF8270;
  }
}