/* Design tokens. Every color, size and radius used in the app comes from here. */
:root {
  color-scheme: light dark;

  --font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Boska", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Height of inputs, selects and the buttons beside them; -sm inside table rows */
  --control-height: 2.625rem;
  --control-height-sm: 1.875rem;

  --content-width: 72rem;
  --form-width: 44rem;

  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-row-alt: #f4f4fb;
  --color-text: #1b1f24;
  --color-text-muted: #5b6470;
  --color-border: #dde1e6;
  --color-border-strong: #b9c0c8;

  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-on-primary: #ffffff;
  --color-focus: #6366f1;

  --color-success-bg: #e8f5ec;
  --color-success-text: #1d6b35;
  --color-danger: #b42318;
  --color-danger-bg: #fdecea;
  --color-warning: #d4a017;
  --color-warning-bg: #fdf4dc;
  --color-warning-text: #7a5a00;

  /* Chart series: indigo for the main series, orange as its contrasting pair */
  --series-1: #5b54e8;
  --series-2: #eb6834;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
}

/* Dark: follows the system unless the user picked a theme (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111418;
    --color-surface: #1a1e24;
    --color-row-alt: #20232f;
    --color-text: #e6e9ed;
    --color-text-muted: #9aa4b0;
    --color-border: #2c323a;
    --color-border-strong: #454d57;

    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-on-primary: #0f0d2e;
    --color-focus: #a5b4fc;

    --color-success-bg: #13301d;
    --color-success-text: #86d69d;
    --color-danger: #f28b82;
    --color-danger-bg: #3a1714;
    --color-warning: #c9a227;
    --color-warning-bg: #3a2f10;
    --color-warning-text: #f0d279;

    --series-1: #7c7ff5;
    --series-2: #d95926;

    --shadow-sm: none;
  }
}

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

  --color-bg: #111418;
  --color-surface: #1a1e24;
  --color-row-alt: #20232f;
  --color-text: #e6e9ed;
  --color-text-muted: #9aa4b0;
  --color-border: #2c323a;
  --color-border-strong: #454d57;

  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
  --color-on-primary: #0f0d2e;
  --color-focus: #a5b4fc;

  --color-success-bg: #13301d;
  --color-success-text: #86d69d;
  --color-danger: #f28b82;
  --color-danger-bg: #3a1714;
  --color-warning: #c9a227;
  --color-warning-bg: #3a2f10;
  --color-warning-text: #f0d279;

  --series-1: #7c7ff5;
  --series-2: #d95926;

  --shadow-sm: none;
}

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