/* WEAVE OR design tokens (UI refinement, 2026-10-08).
 *
 * One small set of CSS variables that new and refined components read, so a colour, size or radius is decided in ONE place. They carry the values the site already uses
 * (the teal of the navigation bar and cards, the 10px card corners, the system font stack of the newer pages): nothing here changes how the site looks by itself.
 * Components (ui.css) use `var(--wo-...)`; older page-level styles keep their literal values until a page is moved over.
 *
 * Dark mode and compact density are DEFINED here (the two blocks at the end) but are not switched on anywhere yet: they are part of a later, separately reviewed step.
 */
:root {
  /* brand: the teal of the bar, the cards and the headings */
  --wo-teal-900: #1a4d56;
  --wo-teal-800: #1f5963;
  --wo-teal-700: #286571;
  --wo-teal-500: #4a9db5;
  --wo-teal-300: #8fc3cf;
  --wo-teal-100: #d4e4e8;
  --wo-teal-50:  #f0f8fa;
  --wo-accent-on-dark: #7ec8d9;               /* indicators on the teal bar */

  /* neutrals */
  --wo-ink: #1a2733;
  --wo-ink-2: #3d4f5c;
  --wo-mute: #5b6f7c;
  --wo-line: #d4e4e8;
  --wo-line-strong: #b9cdd3;
  --wo-surface: #ffffff;
  --wo-surface-2: #f8fafb;                    /* the page background of #content */
  --wo-surface-3: #eef4f6;

  /* meaning (status colours keep their existing meaning; these are the shared tints) */
  --wo-ok: #1e8e4e;     --wo-ok-bg: #e6f5ec;
  --wo-warn: #b26a00;   --wo-warn-bg: #fff3d6;
  --wo-danger: #c0392b; --wo-danger-bg: #fbe9e7;
  --wo-info: #1d6fa5;   --wo-info-bg: #e7f3ff;

  /* type: the system stack the newer pages already use; sizes on a short scale */
  --wo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wo-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wo-text-xs: 11px;
  --wo-text-sm: 12px;
  --wo-text-md: 13px;
  --wo-text-lg: 15px;
  --wo-text-xl: 18px;
  --wo-text-2xl: 24px;

  /* space, shape, depth */
  --wo-space-1: 4px;  --wo-space-2: 8px;  --wo-space-3: 12px;  --wo-space-4: 16px;  --wo-space-5: 24px;  --wo-space-6: 32px;
  --wo-radius-sm: 6px;  --wo-radius-md: 10px;  --wo-radius-pill: 999px;
  --wo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --wo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.14);
  --wo-shadow-lg: 0 10px 28px rgba(16, 52, 60, 0.28);

  /* focus: one visible ring everywhere */
  --wo-focus: #2b8aa3;
  --wo-focus-on-dark: #ffffff;
  --wo-ring: 0 0 0 3px rgba(43, 138, 163, 0.35);

  /* motion */
  --wo-fast: 0.12s ease;
  --wo-med: 0.2s ease;

  /* table rows (compact density changes only these) */
  --wo-row-pad-y: 6px;
  --wo-row-pad-x: 10px;
}

/* ---- prepared for a later step, not active: [data-theme="dark"] on <html> and [data-density="compact"] ---- */
:root[data-theme="dark"] {
  --wo-ink: #e6eef1;
  --wo-ink-2: #c3d2d8;
  --wo-mute: #93a8b1;
  --wo-line: #2f4a52;
  --wo-line-strong: #3d5d66;
  --wo-surface: #16262b;
  --wo-surface-2: #101c20;
  --wo-surface-3: #1d3239;
  --wo-teal-50: #1b3238;
  --wo-teal-100: #2f4a52;
  --wo-ok-bg: #153325;  --wo-warn-bg: #3a2c0e;  --wo-danger-bg: #3a1a16;  --wo-info-bg: #12293b;
  --wo-focus: #6cc3d8;
  --wo-ring: 0 0 0 3px rgba(108, 195, 216, 0.4);
}
:root[data-density="compact"] {
  --wo-row-pad-y: 3px;
  --wo-row-pad-x: 8px;
}