/* ============================================================
   ENJiN!! 既存画面リブランド（legacy-override）
   実装指示書 §9 — 既存の telecareer 系コンポーネント（tc-*, btn-*,
   link-accent 等）の色・書体を ENJiN ブランドへ差し替える。
   値はすべて tokens.css のトークンを参照する。
   読み込み順: tokens → main(Tailwind) → extra → enjin → 本ファイル
   ============================================================ */

/* ---- 書体（和文: Noto Sans JP / 欧文: Inter）---- */
body {
  font-family: var(--f-jp);
}

/* ---- アクセント: コーラル(#e0002a) → シアン ---- */

/* マーカー下線 */
.tc-marker {
  background: linear-gradient(var(--enjin-cyan-core), var(--enjin-cyan-core)) no-repeat 0 100% / 100% 3px;
}

/* エラー・注意系（コーラル流用箇所）はシアンネイビーで置換
   ※ エラーの意味色までシアンにすると識別性が落ちるため deep 系を使用 */
.text-coral-a11y { color: var(--enjin-pink-wine); }
.border-telecareer-coral { border-color: var(--enjin-pink-wine); }
.bg-telecareer-coral { background-color: var(--enjin-cyan-ui); }

/* ---- ボタン ---- */
.btn-cta {
  background-color: var(--c-cta-bg);
  border-color: var(--c-cta-bg);
  color: var(--c-cta-text);
  border-radius: var(--radius-pill);
  letter-spacing: var(--ls-jp);
}
.btn-cta::before {
  /* ホバーで満ちる面。白のままだと文字色（白）と重なって読めなくなる */
  background: var(--enjin-cyan-deep);
}
.btn-cta:hover {
  background-color: var(--enjin-cyan-deep);
  border-color: var(--enjin-cyan-deep);
  color: var(--enjin-paper);
}
.btn-outline-coral {
  border-color: var(--enjin-cyan-ui);
  color: var(--enjin-cyan-navy);
  border-radius: var(--radius-pill);
}
.btn-outline-coral:hover {
  background-color: var(--enjin-cyan-ui);
  color: var(--enjin-paper);
}
.btn-flashy {
  background: var(--enjin-cyan-ui) !important;
  border-color: var(--enjin-cyan-ui) !important;
  border-radius: var(--radius-pill);
}
.btn-flashy:hover {
  background: var(--enjin-cyan-deep) !important;
  color: var(--enjin-paper) !important;
}

/* ---- リンク ---- */
.link-accent {
  color: var(--enjin-cyan-navy);
  text-decoration-color: var(--enjin-cyan-ui);
}
.link-accent:hover {
  color: var(--enjin-cyan-deep);
  text-decoration-color: var(--enjin-cyan-deep);
}

/* ---- フォーム ---- */
.tc-input:focus {
  border-color: var(--enjin-cyan-ui);
  box-shadow: 0 0 0 3px rgba(29, 191, 197, 0.18);
}

/* ---- カード・面 ---- */
.bg-telecareer-hero { background-color: var(--enjin-surface); }

/* ---- アイブロウ（ラベル）---- */
.tc-eyebrow {
  font-family: var(--f-en);
  letter-spacing: var(--ls-en-caps);
  color: var(--enjin-cyan-navy);
}
.tc-eyebrow::before { background: var(--enjin-cyan-ui); }

/* ---- 残存コーラル（#e0002a 系）の一括置換 ---- */
:focus-visible { outline-color: var(--enjin-cyan-ui); }
.eng-rule-red { background: var(--enjin-cyan-ui); }
.tag-coral { background: var(--enjin-cyan-ui); border-color: var(--enjin-cyan-ui); }
.link-accent:hover { color: var(--enjin-cyan-deep); text-decoration-color: var(--enjin-cyan-deep); }
.eng-ticker__item::after { background: var(--enjin-cyan-ui); }
.eng-tile__bar::after { background: var(--enjin-cyan-ui); }
.eng-progress { background: var(--enjin-cyan-ui); }
.eng-scroll-cue::after { background: var(--enjin-cyan-ui); }