:root {
  --tone-0: #ffffff;
  --tone-1: #f1f4f2;
  --bg: var(--tone-0);
  --surface: var(--tone-1);
  --surface-2: #e4e9e6;
  --ink: #1d2220;
  --muted: #5f6763;
  --accent: #a1ffcb;
  --accent-ink: #1d2220;
  --code-bg: #ffffff;
  --rule: #d3dad6;
  --control-line: #777e7a;
  --key: #0a6b3e;
  --ok: #0a7a45;
  --bad: #c0213f;
  --warn: #8a5600;
  --field: #1d2220;
  --field-ink: #f1f4f2;
  --field-muted: #a3aca7;
  --field-surface: #2a302d;
  --field-rule: #3d4541;

  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", monospace;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  --step-head: clamp(1.875rem, 1.2rem + 2.3vw, 3.25rem);
  --step-display: clamp(3.5rem, 1.5rem + 6.5vw, 7rem);
  --ui: 0.875rem;
  --ui-s: 0.8125rem;

  --lh-body: 1.75;
  --lh-head: 1.3;
  --track-body: 0.02em;
  --track-head: 0.01em;

  --margin: clamp(20px, 4.4vw, 72px);
  --gap: clamp(12px, 1.7vw, 24px);
  --section: clamp(96px, 12vw, 184px);
  --radius: 4px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tone-0: #0f1211;
    --tone-1: #181c1a;
    --bg: #0f1211;
    --surface: #181c1a;
    --surface-2: #232826;
    --ink: #edf1ef;
    --muted: #9aa39e;
    --accent: #a1ffcb;
    --accent-ink: #0f1211;
    --code-bg: #0f1211;
    --rule: #303734;
    --control-line: #777f7b;
    --key: #8cebb8;
    --ok: #8cebb8;
    --bad: #ff8399;
    --warn: #f0bf62;
    --field: #e6ece8;
    --field-ink: #101412;
    --field-muted: #4f5853;
    --field-surface: #d6dfda;
    --field-rule: #c2ccc6;
    color-scheme: dark;
  }
}

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

:root[data-theme="dark"] {
  --tone-0: #0f1211;
  --tone-1: #181c1a;
  --bg: #0f1211;
  --surface: #181c1a;
  --surface-2: #232826;
  --ink: #edf1ef;
  --muted: #9aa39e;
  --accent: #a1ffcb;
  --accent-ink: #0f1211;
  --code-bg: #0f1211;
  --rule: #303734;
  --control-line: #777f7b;
  --key: #8cebb8;
  --ok: #8cebb8;
  --bad: #ff8399;
  --warn: #f0bf62;
  --field: #e6ece8;
  --field-ink: #101412;
  --field-muted: #4f5853;
  --field-surface: #d6dfda;
  --field-rule: #c2ccc6;
  color-scheme: dark;
}

:root:lang(en) {
  --lh-body: 1.55;
  --lh-head: 1.12;
  --track-body: -0.005em;
  --track-head: -0.025em;
}

:root:lang(ja) {
  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", monospace;
}

:root:lang(ko) {
  --font-sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", monospace;
  --lh-body: 1.7;
  --track-body: 0;
  --track-head: -0.01em;
}