/**
 * WEB JNN — Design Tokens
 * DESIGN.md の定義に基づくCSS変数の単一ソース
 * 全スタイルシートから @import して使用する
 *
 * 方針: 赤アクセント（#cb1c2d）× 中性ダーク × 減算デザイン
 */

:root {
  /* ─── Colors: Brand ─── */
  --color-primary: #cb1c2d;
  --color-primary-hover: #e52333;
  --color-primary-dim: rgba(203, 28, 45, 0.12);
  --color-primary-border: rgba(203, 28, 45, 0.45);

  /* ─── Colors: Semantic ─── */
  --color-success: #4caf50;
  --color-success-bg: rgba(76, 175, 80, 0.1);
  --color-success-border: rgba(76, 175, 80, 0.35);
  --color-danger: #e05555;
  --color-warning: #e09840;
  --color-info: #7b8ee8;

  /* ─── Colors: Text ─── */
  --color-text: #f0f0f0;
  --color-text-secondary: rgba(240, 240, 240, 0.5);
  --color-text-muted: rgba(240, 240, 240, 0.3);
  --color-text-disabled: rgba(240, 240, 240, 0.2);

  /* ─── Colors: Background / Surface ─── */
  --color-bg: #0d0d0d;
  --color-surface: #161616;
  --color-surface-elevated: #1e1e1e;
  --color-surface-hover: rgba(255, 255, 255, 0.04);

  /* ─── Colors: Border ─── */
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-accent: rgba(255, 255, 255, 0.12);
  --color-border-focus: rgba(203, 28, 45, 0.6);

  /* ─── Spacing ─── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── Typography ─── */
  --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Yu Gothic", Meiryo,
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-display: 32px;
  --font-size-h1: 22px;
  --font-size-h2: 18px;
  --font-size-h3: 15px;
  --font-size-body: 15px;
  --font-size-caption: 13px;
  --font-size-small: 11px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-display: 1.2;
  --line-height-heading: 1.35;
  --line-height-body: 1.75;
  --line-height-caption: 1.6;

  --letter-spacing-heading: 0.04em;
  --letter-spacing-body: 0.03em;
  --letter-spacing-caption: 0.02em;

  /* ─── Border Radius ─── */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-pill: 100px;

  /* ─── Elevation / Shadow ─── */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ─── Layout ─── */
  --container-max: 1100px;
  --container-padding: 20px;
  --header-height: 56px;

  /* ─── Transitions ─── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

@media (max-width: 639px) {
  :root {
    --font-size-display: 24px;
    --font-size-h1: 18px;
    --container-padding: 16px;
  }
}