/* Design tokens for the dio_fibo v2 dashboard.
 *
 * Two layers. Primitives are OKLCH triples; semantic roles are what the rest
 * of the stylesheet is allowed to name. Nothing outside this file writes a
 * colour literal, so retheming is editing one file and re-running the audit in
 * tests/test_contrast.py.
 *
 * Dark is the default. Light is a token override, declared once for the media
 * query and once for the explicit opt-out; tests/test_contrast.py asserts the
 * two copies agree, so the duplication cannot drift.
 *
 * Every spacing step derives from --space-base, which is what the density
 * toggle changes: one value rescales padding, gaps and row height together.
 */

:root {
  color-scheme: dark;

  /* tokens:dark */
  --surface: oklch(0.17 0.012 265);
  --surface-raised: oklch(0.22 0.014 265);
  --surface-sunken: oklch(0.13 0.010 265);
  --border: oklch(0.32 0.018 265);
  --text: oklch(0.95 0.008 265);
  --text-muted: oklch(0.74 0.015 265);
  --accent: oklch(0.80 0.15 168);
  --accent-contrast: oklch(0.18 0.03 168);
  --warn: oklch(0.84 0.14 80);
  --danger: oklch(0.74 0.18 20);
  --long: oklch(0.80 0.15 150);
  --short: oklch(0.74 0.18 20);
  --shadow: oklch(0 0 0);
  /* /tokens:dark */

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-base: 0.5rem;
  --space-1: calc(var(--space-base) * 0.5);
  --space-2: var(--space-base);
  --space-3: calc(var(--space-base) * 1.5);
  --space-4: calc(var(--space-base) * 2);
  --space-5: calc(var(--space-base) * 3);
  --space-6: calc(var(--space-base) * 4);
  --space-7: calc(var(--space-base) * 6);
  --space-8: calc(var(--space-base) * 8);

  --radius: 6px;
  --radius-lg: 10px;
  --border-width: 1px;
}

/* Compact is the default for tables; the toggle moves one number. */
:root[data-density="compact"] {
  --space-base: 0.375rem;
}

:root[data-density="comfortable"] {
  --space-base: 0.625rem;
}

/* tokens:light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface: oklch(0.99 0.002 265);
    --surface-raised: oklch(1 0 265);
    --surface-sunken: oklch(0.96 0.004 265);
    --border: oklch(0.86 0.008 265);
    --text: oklch(0.25 0.015 265);
    --text-muted: oklch(0.47 0.018 265);
    --accent: oklch(0.45 0.12 168);
    --accent-contrast: oklch(0.99 0.005 168);
    --warn: oklch(0.50 0.13 60);
    --danger: oklch(0.50 0.19 22);
    --long: oklch(0.46 0.13 150);
    --short: oklch(0.50 0.19 22);
    --shadow: oklch(0.45 0.02 265);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface: oklch(0.99 0.002 265);
  --surface-raised: oklch(1 0 265);
  --surface-sunken: oklch(0.96 0.004 265);
  --border: oklch(0.86 0.008 265);
  --text: oklch(0.25 0.015 265);
  --text-muted: oklch(0.47 0.018 265);
  --accent: oklch(0.45 0.12 168);
  --accent-contrast: oklch(0.99 0.005 168);
  --warn: oklch(0.50 0.13 60);
  --danger: oklch(0.50 0.19 22);
  --long: oklch(0.46 0.13 150);
  --short: oklch(0.50 0.19 22);
  --shadow: oklch(0.45 0.02 265);
}
/* /tokens:light */