@charset "UTF-8";
/* ============================================================
   Valorant News Japan (VNJ) — Design Tokens for SWELL child
   Source of truth: ../../colors_and_type.css (Claude Design export)
   ------------------------------------------------------------
   Phase 0: トークンの取り込み / SWELL変数へのブリッジ / 基本タイポ
   - VNJの変数(--bg, --fg1, --accent ...)はSWELLの --color_* と衝突しない
   - ダークは colors_and_type.css と同じ [data-theme="dark"] 方式を踏襲
   - SWELL本体の :root より詳細度を上げて(html:root)ブリッジするため、
     読み込み順に依存せずダーク切替が本体UIにも反映される
   ============================================================ */

/* ============================================================
   1. PRIMITIVE COLORS  (raw values — 直接UIに使わない)
   ============================================================ */
:root {
  /* Light primitives — ニュートラルなライトグレー（薄く軽い） */
  --vnj-paper:        #F4F5F7;  /* page background — light gray */
  --vnj-card:         #FFFFFF;  /* card / surface */
  --vnj-ink:          #1B1D21;  /* primary text — cool near-black */
  --vnj-ink-60:       rgba(27, 29, 33, 0.60); /* secondary text */
  --vnj-ink-40:       rgba(27, 29, 33, 0.40); /* tertiary / captions */
  --vnj-hairline:     rgba(27, 29, 33, 0.10); /* borders / dividers */
  --vnj-hairline-strong: rgba(27, 29, 33, 0.16);
  --vnj-wash:         rgba(27, 29, 33, 0.045); /* subtle fill / hover */
  --vnj-red:          #B5302B;  /* （旧アクセント・未使用） */
  --vnj-red-ink:      #8E2420;

  /* Category hues — light（モダン配色・白地でAA） */
  --vnj-cat-skin:     #7C3AED;  /* スキン — violet */
  --vnj-cat-event:    #D97706;  /* 大会・イベント — amber */
  --vnj-cat-team:     #059669;  /* チーム・移籍 — emerald */
  --vnj-cat-patch:    #2563EB;  /* パッチノート — blue */

  /* ----------------------------------------------------------
     Accent options — 差し色（data-vnj-accent で切替）
     各色 ライト版(-l / -l-ink) と ダーク版(-d / -d-ink) を用意。
     ライト=やや濃い(白地でAA) / ダーク=明るい(暗地でAA)。
     ---------------------------------------------------------- */
  --acc-indigo-l:  #2A4BD0;  --acc-indigo-l-ink:  #2540B8;  --acc-indigo-d:  #6E8BFF;  --acc-indigo-d-ink:  #8AA0FF;
  --acc-sky-l:     #0B72D6;  --acc-sky-l-ink:     #0A60B5;  --acc-sky-d:     #4DA8FF;  --acc-sky-d-ink:     #74BEFF;
  --acc-teal-l:    #0E7A82;  --acc-teal-l-ink:    #0B636A;  --acc-teal-d:    #2FD4C4;  --acc-teal-d-ink:    #56E0D2;
  --acc-emerald-l: #0F8A4F;  --acc-emerald-l-ink: #0C7444;  --acc-emerald-d: #2FCB7E;  --acc-emerald-d-ink: #5BD89B;
  --acc-slate-l:   #3F5A8A;  --acc-slate-l-ink:   #37527E;  --acc-slate-d:   #7E9CD0;  --acc-slate-d-ink:   #97B0DC;
  --acc-violet-l:  #6A35C9;  --acc-violet-l-ink:  #5E2DB6;  --acc-violet-d:  #A98CF5;  --acc-violet-d-ink:  #BBA4FF;
  --acc-rose-l:    #C81E5B;  --acc-rose-l-ink:    #AB1A4E;  --acc-rose-d:    #FB6FA0;  --acc-rose-d-ink:    #FF93B8;
  --acc-orange-l:  #EE5A0A;  --acc-orange-l-ink:  #BD4A09;  --acc-orange-d:  #FF8C38;  --acc-orange-d-ink:  #FFB06A;
  --acc-amber-l:   #B45309;  --acc-amber-l-ink:   #92400E;  --acc-amber-d:   #F5B942;  --acc-amber-d-ink:   #FBCB6B;
}

/* ============================================================
   2. SEMANTIC COLORS  (use THESE in components)
   ============================================================ */
:root,
:root[data-theme="light"] {
  --bg:            var(--vnj-paper);
  --surface:       var(--vnj-card);
  --surface-2:     #FFFFFF;
  --fg1:           var(--vnj-ink);     /* headings, primary text */
  --fg2:           var(--vnj-ink-60);  /* body-secondary, meta */
  --fg3:           var(--vnj-ink-40);  /* timestamps, captions */
  --border:        var(--vnj-hairline);
  --border-strong: var(--vnj-hairline-strong);
  --wash:          var(--vnj-wash);
  --accent:        var(--acc-teal-l);       /* 既定=ティール（確定）。data-vnj-accent で切替可 */
  --accent-ink:    var(--acc-teal-l-ink);   /* accent used as text */
  --accent-on:     #FFFFFF;                 /* text on accent fill */

  --cat-skin:      var(--vnj-cat-skin);
  --cat-event:     #B7791F;  /* 落ち着いたゴールド／ブロンズ（旧：派手なローズ） */
  --cat-team:      var(--vnj-cat-team);
  --cat-patch:     var(--vnj-cat-patch);
  --cat-device:    #A21CAF;  /* マゼンタ寄りネオン紫（ゲーマー感） */
  --cat-interview: #C2553A;  /* テラコッタ／コーラル */

  /* category tint backgrounds (light) */
  --cat-skin-bg:      rgba(124, 58, 237, 0.10);
  --cat-event-bg:     rgba(183, 121, 31, 0.10);
  --cat-team-bg:      rgba(5, 150, 105, 0.10);
  --cat-patch-bg:     rgba(37, 99, 235, 0.10);
  --cat-device-bg:    rgba(162, 28, 175, 0.10);
  --cat-interview-bg: rgba(194, 85, 58, 0.10);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #1C1E23;  /* page background — minimal cool dark gray（黒すぎない） */
  --surface:       #24262C;  /* card */
  --surface-2:     #2C2F36;  /* raised surface / hover */
  --fg1:           #E8EAED;  /* primary text — cool off-white */
  --fg2:           rgba(232, 234, 237, 0.62);
  --fg3:           rgba(232, 234, 237, 0.40);
  --border:        rgba(232, 234, 237, 0.10);
  --border-strong: rgba(232, 234, 237, 0.16);
  --wash:          rgba(232, 234, 237, 0.05);
  --accent:        var(--acc-teal-d);       /* 既定=ティール（確定・明るい版） */
  --accent-ink:    var(--acc-teal-d-ink);   /* accent as text on dark (AA) */
  --accent-on:     #14161A;

  /* category hues — lifted for dark legibility */
  --cat-skin:      #A78BFA;
  --cat-event:     #E2B341;  /* 落ち着いたシャンパンゴールド */
  --cat-team:      #34D399;
  --cat-patch:     #60A5FA;
  --cat-device:    #D459F0;  /* マゼンタ寄りネオン紫（ゲーマー感） */
  --cat-interview: #F2785C;  /* コーラル／テラコッタ */
  --cat-skin-bg:      rgba(167, 139, 250, 0.14);
  --cat-event-bg:     rgba(226, 179, 65, 0.14);
  --cat-team-bg:      rgba(52, 211, 153, 0.14);
  --cat-patch-bg:     rgba(96, 165, 250, 0.14);
  --cat-device-bg:    rgba(212, 89, 240, 0.16);
  --cat-interview-bg: rgba(242, 120, 92, 0.15);

  color-scheme: dark;
}

/* ----- BLAZE（レッド主役の高コントラスト・ダーク。新トークン assets/vnj-tokens.css と同系統） ----- */
[data-theme="blaze"] {
  --bg:            #1A0F12;
  --surface:       #2D1C22;
  --surface-2:     #3A242C;
  --fg1:           #F6EAE8;
  --fg2:           rgba(246, 234, 232, 0.66);
  --fg3:           rgba(246, 234, 232, 0.42);
  --border:        rgba(255, 90, 80, 0.16);
  --border-strong: rgba(255, 90, 80, 0.30);
  --wash:          rgba(246, 234, 232, 0.06);
  --accent:        #FF4655;   /* VALORANT RED */
  --accent-ink:    #FF8A93;   /* テキスト用の明るめレッド（暗地でAA） */
  --accent-on:     #FFFFFF;   /* レッド塗りの上の文字 */

  --cat-skin:      #A78BFA;
  --cat-event:     #E2B341;  /* 落ち着いたシャンパンゴールド */
  --cat-team:      #34D399;
  --cat-patch:     #60A5FA;
  --cat-device:    #D459F0;  /* マゼンタ寄りネオン紫（ゲーマー感） */
  --cat-interview: #F2785C;  /* コーラル／テラコッタ */
  --cat-skin-bg:      rgba(167, 139, 250, 0.14);
  --cat-event-bg:     rgba(226, 179, 65, 0.14);
  --cat-team-bg:      rgba(52, 211, 153, 0.14);
  --cat-patch-bg:     rgba(96, 165, 250, 0.14);
  --cat-device-bg:    rgba(212, 89, 240, 0.16);
  --cat-interview-bg: rgba(242, 120, 92, 0.15);

  color-scheme: dark;
}

/* ============================================================
   2b. ACCENT SWITCH — data-vnj-accent でライト/ダーク両対応に切替
   （セマンティック --accent を上書き。SWELLブリッジ経由でUI全体に波及）
   ============================================================ */
:root[data-vnj-accent="indigo"]  { --accent: var(--acc-indigo-l);  --accent-ink: var(--acc-indigo-l-ink);  --accent-on: #FFFFFF; }
:root[data-vnj-accent="sky"]     { --accent: var(--acc-sky-l);     --accent-ink: var(--acc-sky-l-ink);     --accent-on: #FFFFFF; }
:root[data-vnj-accent="teal"]    { --accent: var(--acc-teal-l);    --accent-ink: var(--acc-teal-l-ink);    --accent-on: #FFFFFF; }
:root[data-vnj-accent="emerald"] { --accent: var(--acc-emerald-l); --accent-ink: var(--acc-emerald-l-ink); --accent-on: #FFFFFF; }
:root[data-vnj-accent="slate"]   { --accent: var(--acc-slate-l);   --accent-ink: var(--acc-slate-l-ink);   --accent-on: #FFFFFF; }
:root[data-vnj-accent="violet"]  { --accent: var(--acc-violet-l);  --accent-ink: var(--acc-violet-l-ink);  --accent-on: #FFFFFF; }
:root[data-vnj-accent="rose"]    { --accent: var(--acc-rose-l);    --accent-ink: var(--acc-rose-l-ink);    --accent-on: #FFFFFF; }
:root[data-vnj-accent="orange"]  { --accent: var(--acc-orange-l);  --accent-ink: var(--acc-orange-l-ink);  --accent-on: #FFFFFF; }
:root[data-vnj-accent="amber"]   { --accent: var(--acc-amber-l);   --accent-ink: var(--acc-amber-l-ink);   --accent-on: #FFFFFF; }
[data-theme="dark"][data-vnj-accent="indigo"]  { --accent: var(--acc-indigo-d);  --accent-ink: var(--acc-indigo-d-ink);  --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="sky"]     { --accent: var(--acc-sky-d);     --accent-ink: var(--acc-sky-d-ink);     --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="teal"]    { --accent: var(--acc-teal-d);    --accent-ink: var(--acc-teal-d-ink);    --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="emerald"] { --accent: var(--acc-emerald-d); --accent-ink: var(--acc-emerald-d-ink); --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="slate"]   { --accent: var(--acc-slate-d);   --accent-ink: var(--acc-slate-d-ink);   --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="violet"]  { --accent: var(--acc-violet-d);  --accent-ink: var(--acc-violet-d-ink);  --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="rose"]    { --accent: var(--acc-rose-d);    --accent-ink: var(--acc-rose-d-ink);    --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="orange"]  { --accent: var(--acc-orange-d);  --accent-ink: var(--acc-orange-d-ink);  --accent-on: #14161A; }
[data-theme="dark"][data-vnj-accent="amber"]   { --accent: var(--acc-amber-d);   --accent-ink: var(--acc-amber-d-ink);   --accent-on: #14161A; }

/* ============================================================
   3. TYPOGRAPHY tokens
   ============================================================ */
:root {
  --font-sans: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN',
               'Meiryo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Courier New', monospace;

  /* Weights — headings run heavy for reportage feel */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* Type scale (px values; report-grade hierarchy) */
  --fs-display: 44px;  /* hero / feature headline */
  --fs-h1:      33px;
  --fs-h2:      26px;
  --fs-h3:      21px;
  --fs-h4:      18px;
  --fs-lead:    18px;  /* article standfirst / lede */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-meta:    13px;  /* timestamps, bylines, tags */
  --fs-micro:   11px;  /* eyebrow / overline (uppercase Latin) */

  /* Line-heights — body wide for JP readability, headings tight */
  --lh-tight:   1.28;  /* display / headlines */
  --lh-snug:    1.45;  /* subheads */
  --lh-body:    1.85;  /* long-form JP body */
  --lh-meta:    1.5;

  /* Letter-spacing — headings slightly negative (報道感), eyebrows wide */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.14em;
}

/* ============================================================
   4. SPACING · RADII · BORDERS · SHADOWS · MOTION
   ============================================================ */
:root {
  /* spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* radii — medium, restrained */
  --r-sm: 4px;
  --r-md: 8px;   /* default card / button radius */
  --r-lg: 12px;
  --r-pill: 999px;

  /* borders — hairline 0.5px, light weight */
  --bw-hair: 0.5px;
  --bw: 1px;

  /* shadows — barely-there; editorial sites lean on borders, not elevation */
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-md: 0 2px 8px rgba(20, 22, 26, 0.06), 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 8px 28px rgba(20, 22, 26, 0.10);

  /* motion — quick, no bounce; editorial restraint */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
}
[data-theme="blaze"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   5. SWELL 変数ブリッジ
   ------------------------------------------------------------
   SWELLは :root{ --color_* } をカスタマイザー由来のインラインCSSで出力する。
   ここを html:root (詳細度 0,1,1) で上書きすることで、読み込み順に関係なく
   勝ち、かつ参照先がVNJセマンティックトークン(テーマで切り替わる)なので
   ライト/ダーク両方に自動追従する。
   ※ 構造的な色のみをブリッジ。装飾的な色やアイコン色には触れない。
   ============================================================ */
html:root {
  /* ベース面・文字・境界 */
  --color_bg:         var(--bg);
  --color_content_bg: var(--surface);
  --color_text:       var(--fg1);
  --color_border:     var(--border);
  --color_pale:       var(--wash);
  --color_gray:       var(--wash);  /* SWELLでは薄いグレーの“塗り”。濃色を当てると背景が黒ずむ */
  --color_deep:       var(--fg1);

  /* アクセント（赤）— SWELLのメインカラー系 */
  --color_main:       var(--accent);
  --color_main_dark:  var(--accent-ink);
  --color_main_thin:  var(--wash);
  --color_link:       var(--accent-ink);

  /* ヘッダー / グローバルナビ */
  --color_header_bg:   var(--surface);
  --color_header_text: var(--fg1);
  --color_gnav_bg:     var(--surface);

  /* フッター */
  --color_footer_bg:   var(--bg);
  --color_footer_text: var(--fg2);
}

/* ============================================================
   6. ELEMENT DEFAULTS（Noto Sans JP / 配色 / 行間）
   ------------------------------------------------------------
   html body で SWELL の body 指定(詳細度 0,0,1)に勝つようにする。
   ============================================================ */
html body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 見出しは Noto Sans JP / 太め / やや詰める。
   :where() で詳細度0にし、必要ならSWELL側で上書きできる余地を残す。 */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  letter-spacing: var(--ls-tight);
}

/* テーマ切替時のクロスフェード（控えめ） */
html body,
.l-header,
.l-footer {
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* ============================================================
   7. SEMANTIC TYPE CLASSES（コンポーネントで利用）
   colors_and_type.css と同一定義。Phase 1以降の組み直しで使用。
   ============================================================ */
.t-display {
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}
.t-h1 { font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg1); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg1); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-snug); color: var(--fg1); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--w-bold); line-height: var(--lh-snug); color: var(--fg1); }

.t-lead { font-size: var(--fs-lead); font-weight: var(--w-regular); line-height: 1.7; color: var(--fg2); }
.t-body { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--fg1); }
.t-small { font-size: var(--fs-small); line-height: 1.7; color: var(--fg2); }

.t-meta {
  font-size: var(--fs-meta);
  font-weight: var(--w-medium);
  line-height: var(--lh-meta);
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}

.t-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============================================================
   8. ダークモード切替トグル（ヘッダーにJSで注入される）
   VNJ: hairline境界 / currentColorアイコン / 控えめ
   ============================================================ */
.vnj-theme-toggle__wrap {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-3);
}

.vnj-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg1);
  cursor: pointer;
  line-height: 0;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.vnj-theme-toggle:hover {
  background: var(--wash);
  border-color: var(--fg2);
}
.vnj-theme-toggle:active {
  transform: translateY(0.5px);
}
.vnj-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.vnj-theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

/* ライト時は月（→ダークへ）、ダーク時は太陽（→ライトへ）を表示 */
html:not([data-theme="dark"]) .vnj-theme-toggle .vnj-icon-sun  { display: none; }
html[data-theme="dark"]       .vnj-theme-toggle .vnj-icon-moon { display: none; }