/* Morfos Agentic design tokens (plain CSS variables, no toolchain).
   Colour pairs used by the components are checked by tools/check_contrast.py:
   run `python frontend/tools/check_contrast.py` and keep it green.
   The two dark blocks below MUST stay identical (the checker verifies it). */

:root {
  color-scheme: light dark;

  /* type and space */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 0.375rem;
  --target-min: 2.75rem; /* 44 px primary targets; nothing below 1.5rem (24 px, WCAG 2.5.8) */
  --focus-width: 3px;
  --motion: 150ms;
}

/* theme:light */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f3f5f8;
  --text: #1a1d21;
  --text-muted: #46505e;
  --border: #7a8494;
  --accent: #1250b0;
  --on-accent: #ffffff;
  --focus: #0b57d0;
  --ok: #0b6b3a;
  --ok-bg: #e3f4ea;
  --warn: #8a4b00;
  --warn-bg: #fff1dc;
  --danger: #a8231b;
  --danger-bg: #fde8e6;
  --info: #0b4f9c;
  --info-bg: #e4eefb;
  --neutral: #46505e;
  --neutral-bg: #e9ecf1;
  --skeleton: #d9dee6;
  --region: #b3261e;
}

/* theme:dark (media) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151a;
    --surface: #1b2028;
    --text: #eceff4;
    --text-muted: #b6bfcc;
    --border: #7d8798;
    --accent: #8ab4ff;
    --on-accent: #0b1220;
    --focus: #9cc2ff;
    --ok: #74d6a0;
    --ok-bg: #12301f;
    --warn: #f2b86f;
    --warn-bg: #36260c;
    --danger: #ffa49d;
    --danger-bg: #3d1a17;
    --info: #9cc2ff;
    --info-bg: #14283f;
    --neutral: #b6bfcc;
    --neutral-bg: #262c36;
    --skeleton: #2c333e;
    --region: #ff8f86;
  }
}

/* theme:dark (explicit) */
:root[data-theme="dark"] {
  --bg: #12151a;
  --surface: #1b2028;
  --text: #eceff4;
  --text-muted: #b6bfcc;
  --border: #7d8798;
  --accent: #8ab4ff;
  --on-accent: #0b1220;
  --focus: #9cc2ff;
  --ok: #74d6a0;
  --ok-bg: #12301f;
  --warn: #f2b86f;
  --warn-bg: #36260c;
  --danger: #ffa49d;
  --danger-bg: #3d1a17;
  --info: #9cc2ff;
  --info-bg: #14283f;
  --neutral: #b6bfcc;
  --neutral-bg: #262c36;
  --skeleton: #2c333e;
  --region: #ff8f86;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}