/* ============================================================
   tokens.css — EN MEDIA WordPress Theme / デザイントークン
   3テーマ × ライト/ダーク。body[data-theme][data-mode] で切替
   ============================================================ */

:root {
  /* 中立色（ライト基準） */
  --c-page:      #ececed;
  --c-surface:   #ffffff;
  --c-surface-2: #f5f5f7;
  --c-surface-3: #eeeef1;
  --c-ink:       #1b1b1f;
  --c-ink-2:     #56565f;
  --c-ink-3:     #8a8a93;
  --c-line:      #e6e6ea;
  --c-line-2:    #d7d7dd;
  --c-glass:     rgba(255,255,255,.86);
  --c-glass-2:   rgba(255,255,255,.92);
  --c-ph-cap:    rgba(255,255,255,.72);
  --glow:        0 0 0 rgba(0,0,0,0);

  /* タイポ */
  --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* タイプスケール（SP基準・PCで一部拡大） */
  --fz-hero:   24px;
  --fz-h1:     22px;
  --fz-h2:     19px;
  --fz-h3:     16px;
  --fz-lead:   16px;
  --fz-body:   15.5px;
  --fz-sm:     13.5px;
  --fz-xs:     12px;
  --fz-micro:  10.5px;
  --lh-body:   1.9;

  /* スペーシング・形 */
  --pad-x: 16px;
  --radius: 14px; --radius-sm: 9px; --radius-lg: 20px;
  --maxw: 1180px;
  --sidebar-w: 320px;
  --header-h: 60px;

  --shadow-card: 0 1px 2px rgba(20,20,25,.05), 0 6px 16px rgba(20,20,25,.06);
  --shadow-lift: 0 6px 14px rgba(20,20,25,.10), 0 18px 40px rgba(20,20,25,.14);
  --shadow-cta:  0 8px 22px -6px var(--accent-shadow);

  /* 既定アクセント（red 保険） */
  --accent: oklch(0.52 0.165 18); --accent-hover: oklch(0.45 0.165 20);
  --accent-soft: oklch(0.966 0.022 20); --accent-ink: #fff;
  --cta: oklch(0.57 0.19 28); --cta-hover: oklch(0.50 0.19 28); --cta-ink: #fff;
  --star: oklch(0.80 0.14 78); --badge: oklch(0.52 0.165 18); --badge-ink: #fff;
  --accent-shadow: oklch(0.52 0.165 18 / .45);
}

/* ===== テーマ（ライト） ===== */
[data-theme="theme-red"] {
  --accent: oklch(0.52 0.165 18); --accent-hover: oklch(0.45 0.165 20);
  --accent-soft: oklch(0.965 0.022 20); --accent-ink: #fff;
  --cta: oklch(0.57 0.195 28); --cta-hover: oklch(0.50 0.195 28); --cta-ink: #fff;
  --star: oklch(0.80 0.14 78); --badge: oklch(0.50 0.17 16); --badge-ink: #fff;
  --accent-shadow: oklch(0.52 0.18 22 / .42);
}
[data-theme="theme-purple"] {
  --accent: oklch(0.46 0.155 300); --accent-hover: oklch(0.39 0.155 300);
  --accent-soft: oklch(0.965 0.022 300); --accent-ink: #fff;
  --cta: oklch(0.50 0.17 295); --cta-hover: oklch(0.43 0.17 295); --cta-ink: #fff;
  --star: oklch(0.80 0.13 80); --badge: oklch(0.45 0.16 298); --badge-ink: #fff;
  --accent-shadow: oklch(0.46 0.17 300 / .42);
}
[data-theme="theme-mono-gold"] {
  --accent: oklch(0.28 0.012 270); --accent-hover: oklch(0.20 0.012 270);
  --accent-soft: oklch(0.962 0.006 90); --accent-ink: #f6f1e6;
  --cta: oklch(0.70 0.115 86); --cta-hover: oklch(0.62 0.115 86); --cta-ink: #20201c;
  --star: oklch(0.72 0.12 86); --badge: oklch(0.26 0.01 270); --badge-ink: oklch(0.82 0.11 88);
  --accent-shadow: oklch(0.30 0.02 90 / .40);
}

/* ===== ダークモード（中立色の差し替え） ===== */
[data-mode="dark"] {
  --c-page:      #06060a;
  --c-surface:   #121218;
  --c-surface-2: #1a1a22;
  --c-surface-3: #24242f;
  --c-ink:       #f3f3f7;
  --c-ink-2:     #aaaab8;
  --c-ink-3:     #71717f;
  --c-line:      #2a2a36;
  --c-line-2:    #3a3a49;
  --c-glass:     rgba(14,14,19,.80);
  --c-glass-2:   rgba(14,14,19,.88);
  --c-ph-cap:    rgba(0,0,0,.42);
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45);
  --shadow-lift: 0 12px 26px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.6);
}

/* ===== ダーク × 各テーマ：発光寄りに ===== */
[data-mode="dark"][data-theme="theme-red"] {
  --accent: oklch(0.65 0.205 21); --accent-hover: oklch(0.72 0.205 23);
  --accent-soft: oklch(0.26 0.075 18);
  --cta: oklch(0.57 0.185 24); --cta-hover: oklch(0.64 0.185 24);
  --badge: oklch(0.60 0.205 18); --star: oklch(0.83 0.15 80);
  --accent-shadow: oklch(0.62 0.22 24 / .75); --glow: 0 0 22px oklch(0.64 0.22 24 / .55);
}
[data-mode="dark"][data-theme="theme-purple"] {
  --accent: oklch(0.63 0.185 300); --accent-hover: oklch(0.70 0.185 300);
  --accent-soft: oklch(0.25 0.075 300);
  --cta: oklch(0.61 0.185 296); --cta-hover: oklch(0.68 0.185 296);
  --badge: oklch(0.60 0.185 300); --star: oklch(0.83 0.14 82);
  --accent-shadow: oklch(0.61 0.2 300 / .75); --glow: 0 0 22px oklch(0.62 0.2 300 / .55);
}
[data-mode="dark"][data-theme="theme-mono-gold"] {
  --accent: oklch(0.81 0.13 86); --accent-hover: oklch(0.87 0.13 88);
  --accent-soft: oklch(0.23 0.028 92); --accent-ink: #1a1712;
  --cta: oklch(0.81 0.13 86); --cta-hover: oklch(0.87 0.13 88); --cta-ink: #1a1712;
  --badge: oklch(0.81 0.13 86); --badge-ink: #1a1712; --star: oklch(0.83 0.13 86);
  --accent-shadow: oklch(0.80 0.13 88 / .6); --glow: 0 0 24px oklch(0.80 0.13 88 / .5);
}