/* 由 app/web/tools/sync_tokens.py 从 build/tokens.css 复制 —— 不要手改这一份，
   也不要手改 build/tokens.css（它是 gen_tokens.py 的产物）。
   改令牌 → 改 docs/tokens.json → 跑 build/gen_tokens.py → 跑本脚本。
   副本与源不一致时 app/web/tools/selfcheck.py 会失败。 */
/* 由 gen_tokens.py 从 docs/tokens.json 生成 —— 不要手改 */
:root {

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radius */
  --radius-10: 10px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* font */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans SC", -apple-system, "PingFang SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* size */
  --size-9: 9.5px;
  --size-11: 11px;
  --size-xs: 10.5px;
  --size-sm: 11.5px;
  --size-base: 12.5px;
  --size-md: 13.5px;
  --size-lg: 15px;
  --size-xl: 17px;
  --size-2xl: 20px;
  --size-3xl: 26px;

  /* leading */
  --leading-tight: 1.2;
  --leading-snug: 1.6;
  --leading-normal: 1.7;
  --leading-loose: 1.8;

  /* control */
  --control-h-sm: 24px;
  --control-h-md: 32px;
  --control-h-lg: 36px;
  --control-icon-sm: 14px;
  --control-icon-md: 16px;
  --control-icon-lg: 20px;
  --control-hit-min: 32px;

  /* border · 浅 */
  --border-control: #7E888A;
  --border-hairline: #E3E7E8;
  --border-strong: #12181A;

  /* motion */
  --motion-duration-user-initiated: 0ms;
  --motion-duration-system-initiated: 200ms;
  --motion-duration-item-enter: 160ms;
  --motion-duration-overlay-enter: 140ms;
  --motion-duration-overlay-exit: 100ms;
  --motion-duration-stagger-step: 24ms;
  --motion-duration-stagger-cap: 400ms;
  --motion-duration-heartbeat: 3200ms;
  --motion-duration-backdrop-fade: 1500ms;
  --motion-duration-backdrop-cycle: 8200ms;
  --motion-limits-concurrent-groups: 1;
  --motion-easing-enter: cubic-bezier(.2,0,.3,1);
  --motion-easing-exit: cubic-bezier(.4,0,1,1);
  --motion-easing-loop: ease-in-out;

  /* color · 浅 */
  --c-accent-base: #1D5E6B;
  --c-accent-text: #1A5661;
  --c-accent-wash: #E8F1F2;
  --c-neutral-0: #FFFFFF;
  --c-neutral-100: #E3E7E8;
  --c-neutral-200: #CBD1D2;
  --c-neutral-25: #FAFBFB;
  --c-neutral-400: #98A0A2;
  --c-neutral-50: #F1F4F4;
  --c-neutral-500: #61696B;
  --c-neutral-600: #48504F;
  --c-neutral-800: #252C2D;
  --c-neutral-900: #12181A;
  --c-provenance-derived: #61696B;
  --c-provenance-measured: #12181A;
  --c-provenance-missing-hatch-badge: #DDE2E3;
  --c-provenance-missing-hatch-chart: #CBD1D2;
  --c-provenance-missing-hatch-spark: #98A0A2;
  --c-provenance-missing-text: #12181A;
  --c-scrim: #00000073;
  --c-severity-high: #B0392C;
  --c-severity-low: transparent;
  --c-severity-mid: #48504F;

  /* shadow · 浅 */
  --shadow-actionbar: 0 2px 6px rgba(18,24,26,.16), 0 12px 28px -10px rgba(18,24,26,.30);
  --shadow-card: 0 1px 2px rgba(18,24,26,.04), 0 8px 20px -8px rgba(18,24,26,.10);
  --shadow-popover: 0 2px 6px rgba(18,24,26,.18), 0 10px 24px -8px rgba(18,24,26,.28);

  /* a11y_floor */
  --a11y-floor-target-min: 24px;
  --a11y-floor-target-used: 32px;
  --a11y-floor-focus-ring: 2px;
  --a11y-floor-focus-color: #1D5E6B;
  --a11y-floor-text-contrast: 4.5;
  --a11y-floor-nontext-contrast: 3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --border-control: #8A9496;
    --border-hairline: #212829;
    --border-strong: #E6EBEC;
    --c-accent-base: #6FB3C0;
    --c-accent-text: #86C2CD;
    --c-accent-wash: #0E2226;
    --c-neutral-0: #12171A;
    --c-neutral-100: #212829;
    --c-neutral-200: #2C3436;
    --c-neutral-25: #0B0E0F;
    --c-neutral-400: #6B7476;
    --c-neutral-50: #1A2022;
    --c-neutral-500: #8A9496;
    --c-neutral-600: #A9B2B3;
    --c-neutral-800: #CBD2D3;
    --c-neutral-900: #E6EBEC;
    --c-provenance-derived: #8A9496;
    --c-provenance-measured: #E6EBEC;
    --c-provenance-missing-hatch-badge: #2C3436;
    --c-provenance-missing-hatch-chart: #6B7476;
    --c-provenance-missing-hatch-spark: #8A9496;
    --c-provenance-missing-text: #E6EBEC;
    --c-scrim: #0000008C;
    --c-severity-high: #E68F80;
    --c-severity-low: transparent;
    --c-severity-mid: #A9B2B3;
    --shadow-actionbar: none;
    --shadow-card: none;
    --shadow-popover: none;
  }
}

:root[data-theme="dark"] {
  --border-control: #8A9496;
  --border-hairline: #212829;
  --border-strong: #E6EBEC;
  --c-accent-base: #6FB3C0;
  --c-accent-text: #86C2CD;
  --c-accent-wash: #0E2226;
  --c-neutral-0: #12171A;
  --c-neutral-100: #212829;
  --c-neutral-200: #2C3436;
  --c-neutral-25: #0B0E0F;
  --c-neutral-400: #6B7476;
  --c-neutral-50: #1A2022;
  --c-neutral-500: #8A9496;
  --c-neutral-600: #A9B2B3;
  --c-neutral-800: #CBD2D3;
  --c-neutral-900: #E6EBEC;
  --c-provenance-derived: #8A9496;
  --c-provenance-measured: #E6EBEC;
  --c-provenance-missing-hatch-badge: #2C3436;
  --c-provenance-missing-hatch-chart: #6B7476;
  --c-provenance-missing-hatch-spark: #8A9496;
  --c-provenance-missing-text: #E6EBEC;
  --c-scrim: #0000008C;
  --c-severity-high: #E68F80;
  --c-severity-low: transparent;
  --c-severity-mid: #A9B2B3;
  --shadow-actionbar: none;
  --shadow-card: none;
  --shadow-popover: none;
}