/*
 * MWJ Online semantic design tokens — v1.4
 * Use semantic tokens in application CSS. Do not hard-code theme colours
 * in individual components unless the colour is genuinely content-specific.
 */

:root,
html[data-mwj-theme="dark"] {
  color-scheme: dark;

  --mwj-bg: #10151c;
  --mwj-surface-1: #171e27;
  --mwj-surface-2: #1b222c;
  --mwj-surface-3: #242e3a;
  --mwj-surface-hover: #273544;
  --mwj-surface-selected: #35485c;

  --mwj-border: #35404d;
  --mwj-border-strong: #53657a;

  --mwj-text: #d8e0ea;
  --mwj-text-strong: #eef2f7;
  --mwj-text-muted: #98a5b5;

  --mwj-link: #9fc3e6;
  --mwj-accent: #6f8eaa;

  --mwj-control: #39495c;
  --mwj-control-hover: #465a70;
  --mwj-control-active: #314052;

  --mwj-success: #63a98b;
  --mwj-danger: #c97c85;

  --mwj-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --mwj-shadow: 0 8px 28px rgba(0,0,0,.35);
}

html[data-mwj-theme="light"] {
  color-scheme: light;

  --mwj-bg: #f3f6f9;
  --mwj-surface-1: #ffffff;
  --mwj-surface-2: #edf2f6;
  --mwj-surface-3: #e5ebf1;
  --mwj-surface-hover: #e2eaf1;
  --mwj-surface-selected: #d8e2eb;

  --mwj-border: #ccd6df;
  --mwj-border-strong: #7895ad;

  --mwj-text: #263442;
  --mwj-text-strong: #1d2b38;
  --mwj-text-muted: #667789;

  --mwj-link: #316b9d;
  --mwj-accent: #536f89;

  --mwj-control: #d8e2eb;
  --mwj-control-hover: #cbd8e3;
  --mwj-control-active: #becedb;

  --mwj-success: #36785e;
  --mwj-danger: #a74d58;

  --mwj-shadow-sm: 0 1px 2px rgba(39,57,73,.10);
  --mwj-shadow: 0 8px 26px rgba(39,57,73,.10);
}

:root {
  --mwj-logo-cyan: #22d3ee;
  --mwj-logo-blue: #1267f4;

  --mwj-radius-sm: 4px;
  --mwj-radius: 6px;
  --mwj-radius-lg: 10px;

  --mwj-content-width: 1180px;
  --mwj-readable-width: 760px;
}