/* MezaDDS design tokens (D-82). One source: the public site copies this file byte for byte.
   Colour pairs are checked against WCAG 2.2 by tests/test_design_tokens.py. */
:root {
  --bg: #ffffff; --surface: #ffffff; --panel: #f4f7f4;
  --hero-from: #f0f7f2; --hero-to: #ffffff;
  --fg: #16201a; --muted: #55605a; --line: #e1e7e2;
  --accent: #1f5c3a; --accent-strong: #174a2e; --accent-fg: #ffffff; --accent-soft: #e8f3ec;
  --wood: #8a5a2b;
  --err: #a40e26; --err-bg: #fdf0f0; --err-fg: #ffffff;
  --ok: #1a6b34; --ok-bg: #eaf5ec;
  --warn: #7a5900; --warn-bg: #fff6dc;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --t-xs: 0.8rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.25rem;
  --t-2xl: 1.5rem; --t-3xl: 1.875rem; --t-4xl: 2.25rem;
  --t-hero: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --w-app: 72rem; --w-site: 70rem; --w-text: 40rem;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 28px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(28 36 32 / 0.06), 0 1px 3px rgb(28 36 32 / 0.08);
  --sh-2: 0 4px 12px rgb(28 36 32 / 0.08);
  --sh-3: 0 12px 32px rgb(28 36 32 / 0.12);
  --topbar-h: 3.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d0b; --surface: #121714; --panel: #171d19;
    --hero-from: #0f1612; --hero-to: #0a0d0b;
    --fg: #e7ece8; --muted: #a7b3ac; --line: #26312b;
    --accent: #8fd1a8; --accent-strong: #aee0c1; --accent-fg: #0c1a12; --accent-soft: #1f3328;
    --wood: #d2a06a;
    --err: #ff9aa8; --err-bg: #3a1a1e; --err-fg: #1a0c0f;
    --ok: #7ee2a0; --ok-bg: #16301f;
    --warn: #f3d27a; --warn-bg: #3a2e0a;
    --sh-1: 0 0 0 1px var(--line); --sh-2: 0 0 0 1px var(--line); --sh-3: 0 0 0 1px var(--line);
  }
}

/* Forced themes for the public site's switch (three radio buttons in its header; the app has none, so these never match there).
   Same colours as above; tests/test_design_tokens.py checks they are identical. */
:root:has(#theme-dark:checked) {
    --bg: #0a0d0b; --surface: #121714; --panel: #171d19;
    --hero-from: #0f1612; --hero-to: #0a0d0b;
    --fg: #e7ece8; --muted: #a7b3ac; --line: #26312b;
    --accent: #8fd1a8; --accent-strong: #aee0c1; --accent-fg: #0c1a12; --accent-soft: #1f3328;
    --wood: #d2a06a;
    --err: #ff9aa8; --err-bg: #3a1a1e; --err-fg: #1a0c0f;
    --ok: #7ee2a0; --ok-bg: #16301f;
    --warn: #f3d27a; --warn-bg: #3a2e0a;
    --sh-1: 0 0 0 1px var(--line); --sh-2: 0 0 0 1px var(--line); --sh-3: 0 0 0 1px var(--line);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:has(#theme-light:checked) {
  --bg: #ffffff; --surface: #ffffff; --panel: #f4f7f4;
  --hero-from: #f0f7f2; --hero-to: #ffffff;
  --fg: #16201a; --muted: #55605a; --line: #e1e7e2;
  --accent: #1f5c3a; --accent-strong: #174a2e; --accent-fg: #ffffff; --accent-soft: #e8f3ec;
  --wood: #8a5a2b;
  --err: #a40e26; --err-bg: #fdf0f0; --err-fg: #ffffff;
  --ok: #1a6b34; --ok-bg: #eaf5ec;
  --warn: #7a5900; --warn-bg: #fff6dc;
  --sh-1: 0 1px 2px rgb(28 36 32 / 0.06), 0 1px 3px rgb(28 36 32 / 0.08);
  --sh-2: 0 4px 12px rgb(28 36 32 / 0.08);
  --sh-3: 0 12px 32px rgb(28 36 32 / 0.12);
    color-scheme: light;
  }
}

/* Forced themes for the app's own switch (an attribute on <html> set from the visitor's cookie, D-133): the same colours again;
   tests/test_design_tokens.py checks that all four forced blocks equal the automatic ones. */
:root[data-theme="dark"] {
    --bg: #0a0d0b; --surface: #121714; --panel: #171d19;
    --hero-from: #0f1612; --hero-to: #0a0d0b;
    --fg: #e7ece8; --muted: #a7b3ac; --line: #26312b;
    --accent: #8fd1a8; --accent-strong: #aee0c1; --accent-fg: #0c1a12; --accent-soft: #1f3328;
    --wood: #d2a06a;
    --err: #ff9aa8; --err-bg: #3a1a1e; --err-fg: #1a0c0f;
    --ok: #7ee2a0; --ok-bg: #16301f;
    --warn: #f3d27a; --warn-bg: #3a2e0a;
    --sh-1: 0 0 0 1px var(--line); --sh-2: 0 0 0 1px var(--line); --sh-3: 0 0 0 1px var(--line);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="light"] {
  --bg: #ffffff; --surface: #ffffff; --panel: #f4f7f4;
  --hero-from: #f0f7f2; --hero-to: #ffffff;
  --fg: #16201a; --muted: #55605a; --line: #e1e7e2;
  --accent: #1f5c3a; --accent-strong: #174a2e; --accent-fg: #ffffff; --accent-soft: #e8f3ec;
  --wood: #8a5a2b;
  --err: #a40e26; --err-bg: #fdf0f0; --err-fg: #ffffff;
  --ok: #1a6b34; --ok-bg: #eaf5ec;
  --warn: #7a5900; --warn-bg: #fff6dc;
  --sh-1: 0 1px 2px rgb(28 36 32 / 0.06), 0 1px 3px rgb(28 36 32 / 0.08);
  --sh-2: 0 4px 12px rgb(28 36 32 / 0.08);
  --sh-3: 0 12px 32px rgb(28 36 32 / 0.12);
    color-scheme: light;
  }
}