/*
 * Webready open source design kit: tokens.
 *
 * Copy this file into a tool's stylesheet. Then add the tool's accent block
 * from docs/colour.md (--accent, --accent-tile, --accent-soft) for light and
 * dark. Everything here is the same in every tool.
 *
 * Dark mode follows the system, and a data-theme="light" or "dark" attribute
 * on <html> overrides it.
 *
 * Kit version 0.4.0 (see CHANGELOG.md). Keep this line in your copy and
 * update it when you copy again.
 */

:root {
  /* Type: Figtree for everything, see docs/type.md for the @font-face */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutrals: Tailwind slate */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;

  /* Meanings: never colour alone, always with an icon and a word (docs/colour.md) */
  --up: #047857;
  --up-soft: #ecfdf5;
  --down: #b91c1c;
  --down-soft: #fef2f2;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --new: #1d4ed8;
  --new-soft: #eff6ff;
  --quiet: #4338ca;
  --quiet-soft: #eef2ff;
  --neutral: #475569;
  --neutral-soft: #f1f5f9;
  --none: #cbd5e1;

  /* --none is the fill for "no data": empty bars, meters with nothing yet */

  /* Bars and chart marks coloured by meaning (docs/charts.md) */
  --up-bar: #10b981;
  --up-bar-soft: #6ee7b7;
  --warn-bar: #f59e0b;
  --down-bar: #ef4444;
  --running-bar: #64748b;

  /* Night: a dark surface that stays dark in both themes (Vaka's watch panel) */
  --night: #0f172a;
  --night-2: #1e293b;
  --night-text: #f1f5f9;
  --night-muted: #94a3b8;

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 30px -18px rgb(15 23 42 / 0.25);
  --focus: var(--accent);
  /* Text on a filled --accent (a primary button): white here, dark slate in dark mode where every accent is light */
  --on-accent: #ffffff;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #172135;
  --line: #334155;
  --line-strong: #475569;
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;

  --up: #34d399;
  --up-soft: rgb(52 211 153 / 0.12);
  --down: #f87171;
  --down-soft: rgb(248 113 113 / 0.12);
  --warn: #fbbf24;
  --warn-soft: rgb(251 191 36 / 0.12);
  --new: #93c5fd;
  --new-soft: rgb(147 197 253 / 0.12);
  --quiet: #a5b4fc;
  --quiet-soft: rgb(165 180 252 / 0.12);
  --neutral: #cbd5e1;
  --neutral-soft: rgb(148 163 184 / 0.12);
  --none: #475569;

  --running-bar: #94a3b8;
  --on-accent: #0f172a;
  --shadow: none;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-2: #172135;
    --line: #334155;
    --line-strong: #475569;
    --text: #f1f5f9;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;

    --up: #34d399;
    --up-soft: rgb(52 211 153 / 0.12);
    --down: #f87171;
    --down-soft: rgb(248 113 113 / 0.12);
    --warn: #fbbf24;
    --warn-soft: rgb(251 191 36 / 0.12);
    --new: #93c5fd;
    --new-soft: rgb(147 197 253 / 0.12);
    --quiet: #a5b4fc;
    --quiet-soft: rgb(165 180 252 / 0.12);
    --neutral: #cbd5e1;
    --neutral-soft: rgb(148 163 184 / 0.12);
    --none: #475569;

    --running-bar: #94a3b8;
    --on-accent: #0f172a;
    --shadow: none;

    color-scheme: dark;
  }
}