/* Nordic Utility — canonical design tokens
 * Keep this file local to each site so offline tools remain fully offline.
 * Components should consume semantic tokens, never raw palette values.
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #eef2f6;
  --color-surface-raised: #ffffff;
  --color-border: #d7dee8;
  --color-border-strong: #b8c3d1;

  /* Content */
  --color-text: #172033;
  --color-text-muted: #667085;
  --color-text-faint: #8791a3;

  /* Interaction and meaning */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #e8efff;
  --color-accent: #0f766e;
  --color-accent-soft: #e3f4f1;
  --color-success: #15803d;
  --color-success-soft: #e9f7ee;
  --color-warning: #b45309;
  --color-warning-soft: #fff4df;
  --color-danger: #b42318;
  --color-danger-soft: #fff0ee;
  --color-focus: #6ea8fe;

  /* Shape, depth, and rhythm */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
  --shadow-md: 0 10px 28px rgba(23, 32, 51, 0.09);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --content-wide: 1180px;
  --content-reading: 720px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1320;
  --color-surface: #1b2236;
  --color-surface-subtle: #222b44;
  --color-surface-raised: #202940;
  --color-border: #34405f;
  --color-border-strong: #4a587b;
  --color-text: #e8ecf6;
  --color-text-muted: #a5afcb;
  --color-text-faint: #7f8baa;
  --color-primary: #6ea8fe;
  --color-primary-hover: #91bdff;
  --color-primary-soft: #1d3765;
  --color-accent: #45d1c3;
  --color-accent-soft: #123b38;
  --color-success: #45d483;
  --color-success-soft: #133b2b;
  --color-warning: #f6bd60;
  --color-warning-soft: #3d301b;
  --color-danger: #ff8f8f;
  --color-danger-soft: #472426;
  --color-focus: #91bdff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #0f1320;
    --color-surface: #1b2236;
    --color-surface-subtle: #222b44;
    --color-surface-raised: #202940;
    --color-border: #34405f;
    --color-border-strong: #4a587b;
    --color-text: #e8ecf6;
    --color-text-muted: #a5afcb;
    --color-text-faint: #7f8baa;
    --color-primary: #6ea8fe;
    --color-primary-hover: #91bdff;
    --color-primary-soft: #1d3765;
    --color-accent: #45d1c3;
    --color-accent-soft: #123b38;
    --color-success: #45d483;
    --color-success-soft: #133b2b;
    --color-warning: #f6bd60;
    --color-warning-soft: #3d301b;
    --color-danger: #ff8f8f;
    --color-danger-soft: #472426;
    --color-focus: #91bdff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.3);
  }
}