@import "tailwindcss";

/*
 * Semantic tokens, light values first. Dark values are re-declared for both
 * the OS-level `prefers-color-scheme` and the manual `[data-theme]` toggle
 * (Settings → Theme, see lib/theme.ts), per the dataviz skill's reference
 * palette (references/palette.md).
 */
:root {
  color-scheme: light;
  --surface-0: #f9f9f7; /* page plane */
  --surface-1: #fcfcfb; /* card surface */
  --surface-2: #f2f1ed; /* hover/active wash */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.1);
  --gridline: #e1e0d9;

  --success: #006300;
  --danger: #c1302a;

  --series-1: #2a78d6; /* blue */
  --series-2: #eb6834; /* orange */
  --series-3: #1baf7a; /* aqua */
  --series-4: #eda100; /* yellow */
  --series-5: #e87ba4; /* magenta */
  --series-6: #008300; /* green */
  --series-7: #4a3aa7; /* violet */
  --series-8: #e34948; /* red */
  --series-other: #898781;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border: rgba(255, 255, 255, 0.1);
    --gridline: #2c2c2a;

    --success: #0ca30c;
    --danger: #e66767;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --border: rgba(255, 255, 255, 0.1);
  --gridline: #2c2c2a;

  --success: #0ca30c;
  --danger: #e66767;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
}

@theme {
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border);
  --color-gridline: var(--gridline);
  --color-success: var(--success);
  --color-danger: var(--danger);

  --color-series-1: var(--series-1);
  --color-series-2: var(--series-2);
  --color-series-3: var(--series-3);
  --color-series-4: var(--series-4);
  --color-series-5: var(--series-5);
  --color-series-6: var(--series-6);
  --color-series-7: var(--series-7);
  --color-series-8: var(--series-8);
  --color-series-other: var(--series-other);

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background-color: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

* {
  border-color: var(--color-border);
}