/* AmIOnFire design tokens — dark-first; light via [data-theme="light"] */

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

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #0e1116;
  --bg-elevated: #161b22;
  --surface: #1c232d;
  --surface-hover: #252d3a;
  --border: #2e3846;
  --border-strong: #3d4a5c;

  --text: #f2f4f7;
  --text-muted: #c5cdd6;
  --text-faint: #9aa5b4;

  --accent: #fb8c00;
  --accent-text: #1a1208;
  --focus: #82b1ff;

  --ok: #66bb6a;
  --warn: #ffa726;
  --error: #ef5350;
  --stale: #ffca28;
  --idle: #6b7684;

  --chip-active: #e64a19;
  --chip-contained: #43a047;
  --chip-out: #78909c;
  --chip-oc: #c62828;
  --chip-bh: #ef6c00;
  --chip-uc: #2e7d32;

  --overlay: rgb(0 0 0 / 0.5);
  --shadow: 0 8px 28px rgb(0 0 0 / 0.45);
  --header-h: 56px;
  --header-h-mobile: 48px;
  --sidebar-w: 380px;
  --sidebar-w-tablet: 320px;
  --sheet-peek: 88px;
  --sheet-full: 92dvh;
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 44px;
  --z-header: 1800;
  --z-sheet: 1900;
  --z-drawer: 2000;
  --z-modal: 3000;
}

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

  --bg: #eef1f5;
  --bg-elevated: #f7f8fa;
  --surface: #ffffff;
  --surface-hover: #f0f3f7;
  --border: #d3dae3;
  --border-strong: #b4becb;

  --text: #1a1d21;
  --text-muted: #3d4654;
  --text-faint: #5c6775;

  --accent: #e65100;
  --accent-text: #fff8f0;
  --focus: #1565c0;

  --ok: #2e7d32;
  --warn: #ef6c00;
  --error: #c62828;
  --stale: #f9a825;
  --idle: #78909c;

  --overlay: rgb(16 22 30 / 0.4);
  --shadow: 0 8px 28px rgb(20 28 40 / 0.18);
}

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

:root {
  --motion: 220ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: calc(var(--z-modal) + 1);
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}