/* 公共设计令牌：缓动曲线、字体、颜色。四个 demo 都引用这个文件。 */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500&family=Fragment+Mono&display=swap");

:root {
  /* 原站用的几条缓动（名字照搬，数值是常见的标准曲线） */
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* CSS linear() 可以画出“回弹”曲线，不用 JS 弹簧库 */
  --ease-spring-bouncy: linear(0, 0.45 12%, 0.87 25%, 1.06 38%, 1.1 46%, 1.04 60%, 0.99 74%, 1);

  /* 原站标题字体 AntiqueLegacy 是商用字体，这里用 Inter Tight 代替 */
  --font-headline: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;

  --fg: #000;
  --bg: #fff;
  --muted: #8a8a8a;
  --accent: #ff591d;
  --page-pad: clamp(16px, 4vw, 40px);
}

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

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-headline);
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* 每个 demo 顶部的学习工具条 */
.toolbar {
  position: fixed;
  left: var(--page-pad);
  bottom: 16px;
  z-index: 100;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar button,
.toolbar a {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
}

.toolbar button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }