/* ============================================================
   tokens.css — 全プロダクト共通のデザイントークン
   ------------------------------------------------------------
   * 色は意味で命名する (primary / good / warn / bad)
   * 角丸 / 余白 / フォントは離散的なスケールを持つ
   * ダークテーマ前提
   ============================================================ */

:root {
  /* -------- Color: surfaces (深い → 浅い) -------- */
  --bg:         #0d1117;
  --bg-deep:    #010409;
  --panel:      #161b22;
  --panel-2:    #1c2128;
  --panel-3:    #22272e;

  /* -------- Color: borders -------- */
  --border:        #30363d;
  --border-soft:   #21262d;
  --border-hover:  #444c56;

  /* -------- Color: text -------- */
  --text:    #e6edf3;
  --text-2:  #c9d1d9;
  --muted:   #8b949e;
  --muted-2: #6e7681;

  /* -------- Color: primary (青) -------- */
  --accent:           #58a6ff;
  --accent-2:         #1f6feb; /* solid bg */
  --accent-bg:        rgba(56, 139, 253, 0.15);
  --accent-bg-strong: rgba(56, 139, 253, 0.25);

  /* -------- Color: semantic -------- */
  --good:     #3fb950;
  --good-bg:  rgba(63, 185, 80, 0.15);
  --warn:     #d29922;
  --warn-bg:  rgba(210, 153, 34, 0.15);
  --bad:      #f85149;
  --bad-bg:   rgba(248, 81, 73, 0.15);

  /* -------- Color: decoration (限定使用) -------- */
  --purple:    #a371f7;
  --purple-bg: rgba(163, 113, 247, 0.15);

  /* -------- Radius -------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* -------- Spacing (4 / 6 / 8 / 12 / 16 / 24 / 32) -------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;

  /* -------- Typography -------- */
  --font:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴシック",
    "Noto Sans JP", "Inter", sans-serif;
  --mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale: 数字は px。line-height はベース 1.55 */
  --fs-xs:   10.5px;
  --fs-sm:   11.5px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;

  /* -------- Motion -------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* -------- Z-index -------- */
  --z-panel:   10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}

/* ベースリセット (タグ直接に当てる、軽量) */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-feature-settings: "palt" 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-bg-strong);
  color: var(--text);
}