/* mlxradar design tokens and base component layer.
   Soft, airy system: system font, one blue accent, hairlines, rounded surfaces.
   Theme follows the OS; [data-theme="dark" | "light"] on any wrapper forces one. */

:root, [data-theme="light"] {
  color-scheme: light;
  --color-bg: #ffffff; --color-surface: #f5f6f8; --color-raised: #ffffff;
  --color-fill: rgba(118,120,130,.12); --color-fill-2: rgba(118,120,130,.2);
  --color-text: #1b1c1f; --color-text-2: #55575e; --color-text-3: #6b6d75;
  --color-divider: rgba(0,0,0,.14); --color-hairline: rgba(0,0,0,.08);
  --color-inverse-bg: #1b1c1f; --color-inverse-text: #ffffff;
  --accent: #1667d9; --accent-hover: #0f55b8; --accent-tint: rgba(22,103,217,.1);
  --ok: #1c8048; --ok-fill: #34b56a; --ok-tint: rgba(52,181,106,.14);
  --warn: #8a5a00; --warn-fill: #f0a92b; --warn-tint: rgba(240,169,43,.18);
  --code-bg: #f5f6f8; --code-text: #1b1c1f; --code-dim: #6b6d75;
  --syn-cmd: #a2319a; --syn-flag: #2d6a86; --syn-str: #b3401e; --syn-num: #1667d9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0e0e10; --color-surface: #1a1a1d; --color-raised: #2a2a2e;
    --color-fill: rgba(118,120,130,.24); --color-fill-2: rgba(118,120,130,.36);
    --color-text: #f4f4f6; --color-text-2: #b6b7bd; --color-text-3: #96979e;
    --color-divider: rgba(255,255,255,.18); --color-hairline: rgba(255,255,255,.1);
    --color-inverse-bg: #f4f4f6; --color-inverse-text: #0e0e10;
    --accent: #63a9ff; --accent-hover: #8cc0ff; --accent-tint: rgba(99,169,255,.16);
    --ok: #4fd08a; --ok-fill: #34b56a; --ok-tint: rgba(52,181,106,.2);
    --warn: #f2bb55; --warn-fill: #e0a02b; --warn-tint: rgba(240,169,43,.2);
    --code-bg: #1a1a1d; --code-text: #f4f4f6; --code-dim: #96979e;
    --syn-cmd: #f08ad6; --syn-flag: #8fc7d9; --syn-str: #ff9478; --syn-num: #7fb6ff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 10px 30px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0e0e10; --color-surface: #1a1a1d; --color-raised: #2a2a2e;
  --color-fill: rgba(118,120,130,.24); --color-fill-2: rgba(118,120,130,.36);
  --color-text: #f4f4f6; --color-text-2: #b6b7bd; --color-text-3: #96979e;
  --color-divider: rgba(255,255,255,.18); --color-hairline: rgba(255,255,255,.1);
  --color-inverse-bg: #f4f4f6; --color-inverse-text: #0e0e10;
  --accent: #63a9ff; --accent-hover: #8cc0ff; --accent-tint: rgba(99,169,255,.16);
  --ok: #4fd08a; --ok-fill: #34b56a; --ok-tint: rgba(52,181,106,.2);
  --warn: #f2bb55; --warn-fill: #e0a02b; --warn-tint: rgba(240,169,43,.2);
  --code-bg: #1a1a1d; --code-text: #f4f4f6; --code-dim: #96979e;
  --syn-cmd: #f08ad6; --syn-flag: #8fc7d9; --syn-str: #ff9478; --syn-num: #7fb6ff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

:root {
  --accent-solid: #1667d9; --accent-solid-hover: #0f55b8;
  /* Legacy aliases kept so older pages resolve */
  --color-accent: var(--accent); --link: var(--accent); --link-hover: var(--accent-hover);
  --mlx: var(--accent); --mlx-ink: var(--color-text-2); --mlx-tint: var(--color-fill);
  --cai: var(--accent); --cai-ink: var(--color-text-2); --cai-tint: var(--color-fill);
  --color-neutral-100: var(--color-fill); --inline-code-bg: var(--color-fill);
  --rule: 1px solid var(--color-hairline); --rule-thin: 1px solid var(--color-hairline);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: var(--font-ui);
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 6.4vw, 72px);
  --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 17px; --fs-h6: 14px;
  --fs-lead: 21px; --fs-body: 17px; --fs-ui: 15px; --fs-small: 14px; --fs-caption: 12px; --fs-micro: 11px;
  --space-5: 20px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --page-max: 1120px; --gutter: clamp(20px, 4vw, 40px); --header-h: 52px;
  --radius: 18px; --radius-md: 12px; --radius-sm: 8px; --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); }
body { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.022em; line-height: 1.12; }
h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
pre, code { font-family: var(--font-code); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-tint); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color .15s; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-solid); color: #fff; }
.btn-primary:hover { background: var(--accent-solid-hover); color: #fff; }
.btn-secondary { background: var(--color-fill); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-fill-2); color: var(--color-text); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-tint); color: var(--accent); }
.btn-icon { width: 36px; padding: 0; }
.btn:disabled { opacity: .4; cursor: default; }

.input { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--color-fill); color: var(--color-text); font: inherit; font-size: 14px; width: 100%; transition: box-shadow .15s, border-color .15s; }
.input::placeholder { color: var(--color-text-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.mlxr-search { transition: box-shadow .15s; }
.mlxr-search:focus-within { box-shadow: 0 0 0 4px var(--accent-tint), inset 0 0 0 1px var(--accent); }

.table { width: 100%; border-collapse: collapse; }

@keyframes mlxr-sweep { to { transform: rotate(360deg); } }
@keyframes mlxr-spin { to { transform: rotate(360deg); } }
@keyframes mlxr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mlxr-shimmer { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}