/* ============================================================
   BCJ Design Tokens
   既存 HTML（/media/top, /media/article）から抽出
   ============================================================ */

:root {
  /* ---------- Brand Logo ---------- */
  /* WP カスタムロゴが設定されている場合は inc/enqueue.php で上書きされる */
  --logo-blue: url("../images/logo-blue.png");

  /* ---------- Colors ---------- */
  /* 暗黒系 (400 種類の黒から、青寄り＆呼吸できる明度を選択) */
  --bg:        #181a20;   /* ベース背景 - Linear / GitHub Dark に近い */
  --bg-2:      #20222a;   /* カード背景 */
  --bg-3:      #292b33;   /* 二段明るい背景 */
  --fg:        #ffffff;
  --fg-dim:    #9a9a9a;
  --fg-mute:   #5a5a5a;
  --line:      #3a3d44;
  --line-2:    #2b2e36;

  --blue:      #1f4ef0;
  --blue-2:    #4d72f5;
  --blue-glow: rgba(31, 78, 240, .55);

  --gray-50:  #f5f5f5;
  --gray-100: #e5e5e5;
  --gray-200: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* ---------- Typography ---------- */
  --font-display: "Archivo Black", sans-serif;
  --font-sans:    "Archivo", "Zen Kaku Gothic New", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
  --font-jp:      "Zen Kaku Gothic New", -apple-system, sans-serif;

  /* ---------- Easing ---------- */
  --ease:     cubic-bezier(.7, .0, .16, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.5, 0, .75, 0);

  /* ---------- Z-index ---------- */
  --z-grain:   100;
  --z-header:  150;
  --z-curtain: 200;
  --z-modal:   1000;
  --z-toast:   2000;

  /* ---------- Layout ---------- */
  --header-h:  80px;
  --container: 1280px;
  --container-narrow: 760px;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radius ---------- */
  --r-0:   0;
  --r-2:   2px;
  --r-4:   4px;
  --r-8:   8px;
  --r-full: 999px;

  /* ---------- Transitions ---------- */
  --t-fast: .2s;
  --t-base: .35s;
  --t-slow: .6s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}