/* 値は UI.md「具体値の一覧」。ここには値だけを置く */
:root {
  --bg: #F2F2EF;
  --surface: #FFFFFF;
  --surface-2: #F0F0EC;
  --surface-3: #E3E3DD;
  --stage: #E4E4DE;
  --line: #D9D9D2;
  --line-soft: #E8E8E2;
  --text: #1A1A1F;
  --text-mut: #5C5C66;
  --text-dim: #8A8A94;
  --accent: #4F46E5;
  --accent-ink: #4338CA;
  --accent-weak: rgba(79, 70, 229, .10);
  --accent-line: rgba(79, 70, 229, .40);
  --danger: #D92B41;
  --danger-ink: #B01228;
  --danger-weak: rgba(217, 43, 65, .10);
  --live: var(--danger);
  --live-ink: var(--danger-ink);
  --live-weak: var(--danger-weak);
  --host: #99610A;
  --host-weak: rgba(153, 97, 10, .13);
  --host-ink: #FFFFFF;
  --ok: #1B8F52;
  --warn: #9A6100;
  --on-slide: rgba(16, 16, 22, .80);
  --on-slide-firm: rgba(16, 16, 22, .92);
  --on-slide-text: #F4F4F7;
  --on-slide-line: rgba(255, 255, 255, .18);
  --scrim: rgba(20, 20, 28, .44);

  --font: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;

  --gap: 12px;
  --gap-lg: 20px;
  --pad: 14px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 6px 22px rgba(20, 20, 30, .13);
  --shadow-sm: 0 2px 8px rgba(20, 20, 30, .10);
  --ease: cubic-bezier(.2, .8, .3, 1);

  --topbar-h: 52px;
  --chat-w: clamp(320px, 28vw, 420px);

  --z-bubble: 5;
  --z-topbar: 30;
  --z-strip: 40;
  --z-toast: 50;
  --z-menu: 60;
  --z-chrome: 70;
  --z-qr: 80;
  --z-dialog: 90;
  --z-modal: 100;
}