/* tokens.css — design tokens, reset, base typography, focus, motion */

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

  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #141824;
  --muted: #5b6072;
  --line: #e4e6ef;

  --accent: #4f46e5;
  --accent2: #7c3aed;
  --soft: #eef0ff;

  --ok: #1a7f37;
  --bad: #b3261e;

  --warn-bg: #fff8e6;
  --warn-border: #f0d9a0;
  --warn-text: #7a5a00;

  --shadow:
    0 1px 2px rgba(20, 22, 31, 0.05),
    0 12px 32px -12px rgba(20, 22, 31, 0.14);

  --glow: none;

  --wrap: 880px;
  --wrap-wide: 960px;

  --radius-card: 22px;
  --radius-ctrl: 14px;
  --radius-pill: 99px;

  --ease: 170ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0b0e17;
    --card: #151a2b;
    --text: #e8eaf2;
    --muted: #9aa0b4;
    --line: #262a38;

    --accent: #4f46e5;
    --accent2: #7c3aed;
    --soft: #1c1f2e;

    --ok: #3fb950;
    --bad: #f2726a;

    --warn-bg: #241f10;
    --warn-border: #4a3d18;
    --warn-text: #e8c96a;

    --shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 16px 40px -16px rgba(0, 0, 0, 0.7);

    --glow: none;
  }
}

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

  --bg: #0b0e17;
  --card: #151a2b;
  --text: #e8eaf2;
  --muted: #9aa0b4;
  --line: #262a38;

  --accent: #4f46e5;
  --accent2: #7c3aed;
  --soft: #1c1f2e;

  --ok: #3fb950;
  --bad: #f2726a;

  --warn-bg: #241f10;
  --warn-border: #4a3d18;
  --warn-text: #e8c96a;

  --shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 16px 40px -16px rgba(0, 0, 0, 0.7);

  --glow: none;
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

button {
  cursor: pointer;
}

/* ---------- focus ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}