/**
 * tokens.css — デザイントークン
 *
 * ★ 視覚デザインの変更は原則このファイルだけで行う（SPEC.md §7）。
 *   styles.css 側に色・寸法を直書きしないこと（ビルド時に validateNoLiteralColors が ⚠️ を出す）。
 *
 * 出典: engine-th2 トップページのデザイン（2026-08-05 に受領したスクリーンショット）。
 * 色値はスクリーンショットからの目視採色であり、実CSSの厳密値ではない（SPEC.md §U-1）。
 */

:root {
  /* ── 配色: ブランド ─────────────────────────────── */
  --color-accent: #1b4bc9;
  --color-accent-hover: #143a9f;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #eaf0fd;
  --color-accent-border: #c3d3f5;

  /* ── 配色: 面と文字 ─────────────────────────────── */
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f7fa;
  --color-surface: #ffffff;
  --color-text: #141922;        /* CR-01 濃く */
  --color-text-muted: #565e6d;  /* CR-01 濃く */
  --color-text-faint: #7d8695;  /* CR-01 濃く */
  --color-heading: #12161f;
  --color-border: #e4e8ef;
  --color-border-strong: #ccd3de;

  /* ヒーロー: 淡い青のグラデーション＋ドット地図 */
  --color-hero-from: #e9eff9;
  --color-hero-to: #f7f9fc;
  --color-hero-dot: #9db4e0;

  /* フッター: 濃紺 */
  --color-footer-bg: #101a38;
  --color-footer-text: #c7cfdf;
  --color-footer-heading: #ffffff;
  --color-footer-border: #26314f;

  /* 動画プレイヤー面 */
  --color-video-bg: #0c1428;

  /* 注意喚起（サンプル原稿の告知など）。本文の情報と取り違えられては困る種類の
     お知らせに使う。アクセント色とは別系統の琥珀にして、リンクや見出しと混同させない。 */
  --color-notice-bg: #fdf7ec;
  --color-notice-border: #f0c67d;
  /* バッジ地色。白文字で 4.5:1 を満たす濃さにする（#e0932f は 2.50:1 で AA 不適合。
     読者を誤読から守る唯一の可視装置が最も読めない配色、という状態だった） */
  --color-notice-accent: #8a5a0b;
  --color-notice-text: #6b4a12;
  --color-notice-contrast: #ffffff;

  /* ── 配色: カテゴリバッジ ───────────────────────── */
  --color-badge-pickup: #1b4bc9;
  --color-badge-news: #1b4bc9;
  --color-badge-product: #17408f;
  --color-badge-market: #0f7a6b;
  --color-badge-tech: #6d3fb8;
  --color-badge-contrast: #ffffff;

  /* ── 配色: イベント状態 ─────────────────────────── */
  --color-status-soon: #d8452f;
  --color-status-online: #1b4bc9;
  --color-status-open: #0f8a4d;
  --color-status-planned: #6b7382;

  /* ── 配色: ランキング順位 ───────────────────────── */
  --color-rank-1: #d9a406;
  --color-rank-2: #97a0af;
  --color-rank-3: #b3773a;
  --color-rank-other: #ccd3de;

  /* ── 配色: サービスアイコン ─────────────────────── */
  --color-svc-tv: #1b6fd1;
  --color-svc-media: #e08a1e;
  --color-svc-video: #d8452f;
  --color-svc-magazine: #128a52;
  --color-svc-ad: #d63a6a;
  --color-svc-products: #7a45c4;
  --color-svc-exhibition: #0f8f96;
  --color-svc-recruitment: #d6478f;

  /* ── 企業マイクロページ ─────────────────────────
     既定値。content の theme で企業ごとに上書きできる（build が <style> を生成する）。 */
  --company-accent: #2f2f8f;
  --company-accent-deep: #1b1b5c;
  --company-accent-soft: #ececf8;
  --company-cta: #cc2130;
  --company-cta-hover: #a81a26;
  --company-eyebrow: #2b4bbd;

  --gradient-company-hero: linear-gradient(
    115deg,
    var(--company-accent-deep) 0%,
    var(--company-accent) 55%,
    #3a3ab0 100%
  );
  --gradient-company-contact: linear-gradient(
    100deg,
    var(--company-accent-deep) 0%,
    var(--company-accent) 100%
  );
  --gradient-stat: linear-gradient(to top, rgba(10, 12, 40, 0.92) 0%, rgba(10, 12, 40, 0.35) 70%);
  --color-company-watermark: rgba(255, 255, 255, 0.06);
  --color-company-border: #dfe3ec;
  --color-company-footer-bg: #ffffff;

  --color-status-upcoming: #4a3fa8;
  --color-status-report: #2a3352;

  /* ── タイポグラフィ ─────────────────────────────── */
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;

  /* 2026-08-18: 全段を約1pt（≒1.33px）引き上げた（ユーザー指示）。
     本文 15.04px → 16.4px。日本語は同じ px でも欧文より小さく見えるため、
     16px を本文の実質的な下限として扱う。段の比率（単調増加）は維持する。 */
  /* ヒーロー背景画像の上に敷く明幕。このヒーローの文字は濃色なので、
     画像を白く沈めて可読性を確保する（暗幕にすると濃い文字が読めない） */
  --gradient-hero-scrim: linear-gradient(
    100deg,
    rgb(255 255 255 / 94%) 0%,
    rgb(255 255 255 / 82%) 48%,
    rgb(255 255 255 / 46%) 100%
  );

  --text-2xs: 0.94rem;   /* 15.0px  CR-01 */
  --text-xs: 1.01rem;    /* 16.2px  CR-01 */
  --text-sm: 1.05rem;    /* 16.8px  CR-01 */
  --text-base: 1.09rem;  /* 17.4px  CR-01 */
  --text-lg: 1.22rem;    /* 19.5px  CR-01 */
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);

  --leading-tight: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.06em;
  --tracking-logo: 0.02em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ── 余白スケール ───────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;

  /* ── 角丸・影・線 ───────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 22, 31, 0.07);
  --shadow-md: 0 4px 14px rgba(18, 22, 31, 0.1);
  --shadow-card: 0 2px 10px rgba(18, 22, 31, 0.08);

  /* セクション見出しの左アクセントバー */
  --accent-bar-width: 4px;

  /* ── グラデーション・スクリム（styles.css で色リテラルを使わないためトークン化） ── */
  --gradient-hero: linear-gradient(165deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
  --gradient-feature: linear-gradient(
    to top,
    rgba(8, 12, 24, 0.93) 0%,
    rgba(8, 12, 24, 0.62) 45%,
    rgba(8, 12, 24, 0) 80%
  );
  --gradient-video: linear-gradient(150deg, #0c1428 0%, #16224a 100%);
  --color-scrim: rgba(8, 12, 24, 0.55);
  --color-scrim-strong: rgba(8, 12, 24, 0.82);
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-play-bg: rgba(255, 255, 255, 0.16);
  --color-play-border: rgba(255, 255, 255, 0.85);
  --color-track: rgba(255, 255, 255, 0.28);

  /* ── レイアウト ─────────────────────────────────── */
  /* コンテンツ幅。広い画面では画面の 80% を使う（運用指示）。
     1200px を下限に残すのは、1280px 級で 80vw にすると**今より狭くなる**ため。 */
  /* ランキングの順位色（依頼書 0817 図版 image7）。金・銀・淡色。3位は既定のアクセント色を使う */
  --color-rank-gold: #f0a323;
  --color-rank-silver: #9aa3ad;
  --color-rank-ink: #ffffff;
  --color-rank-rest: #e3e7ee;
  --color-rank-rest-ink: #7b8593;

  /* お問い合わせボタン（依頼書 0817 CR-25「ベースは赤色で変更も可」）。
     企業ごとの上書きは --company-cta（content の theme から入る）。 */
  --color-cta-red: #d5262b;
  --color-cta-red-hover: #b71f24;

  /* 1280px のノートPCで、ヘッダーを1段（ロゴ＋タグライン＋ナビ＋言語＋検索）に収めるための幅。
     実測 2026-09-08: ナビを 13px・項目間 20px にすると必要幅は 1254px。
     左右の余白（--gutter × 2 = 48px）を引いた 1232px を確保すれば 1280px の画面で収まる。
     ⚠️ 1200px のままだと 32px 足りず、タグラインが押し出される。 */
  --width-content: max(1232px, 80vw);
  --width-prose: 70ch;

  /* 読み物（節の説明文・掴み・リード）の幅。
     ★ ch/px ではなく**親（コンテンツエリア）に対する％**で決める（ユーザー指示 2026-08-18）。
       70ch のような絶対指定だと、画面幅が変わったときに本文幅だけが据え置かれ、
       左右の余白との比率が崩れる（1152px のコンテンツ幅に対し実測 679px＝59%で、
       右側だけが大きく空いていた）。％なら余白の比率が常に一定に保たれる。
     既定はモバイル値＝全幅。768px 以上で 80% へ（styles.css の min-width で上書き）。 */
  --width-read: 100%;

  /* 問い合わせフォームの幅。既定はモバイル＝全幅、768px 以上で 60%（中央寄せ）。
     読み物(--width-read)より狭いのは、入力欄は左右に視線を振らせないほうが
     記入しやすいため。 */
  --width-form: 100%;

  /* モバイルファースト: 既定はモバイル値。styles.css の min-width で拡張する */
  --header-height: 52px;
  --scroll-offset: 108px;
  /* モバイルのコンテンツ幅は画面の90%（左右5%ずつ）。
     % ではなく vw を使う理由: --gutter は横スクロールするカード列で
     `margin-inline: calc(var(--gutter) * -1)` と `padding: 0 var(--gutter)` の
     対で使われている。% は「親要素の幅」に対する比率なので、親が狭い入れ子では
     負マージンと padding の値がズレて列が左右非対称になる。vw なら常に画面基準で
     一致する。768px 以上では固定値へ戻す（下の min-width: 768px で上書き）。 */
  --gutter: 5vw;

  /* 横スクロールするカード列で「次が覗く」幅（モバイルのみ有効） */
  --peek-4: 76%;
  --peek-5: 70%;
  --peek-6: 58%;

  /* ── モーション ─────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ── 始動予告LP: WARM UP YOUR ENGINE. の炎（暖色グラデーション） ── */
  --color-flame-deep: #e64a00;
  --color-flame-hot: #ff7a1a;
  --color-flame-amber: #ffb300;
  /* 画像の上に文字を載せるときの下地（透過白）。銀色のエンジンに炎色の文字が
     直接重なると読めないため、文字の背後だけを白で持ち上げる */
  --color-overlay-scrim: rgba(255, 255, 255, 0.86);
  --color-overlay-scrim-edge: rgba(255, 255, 255, 0.6);

  /* 画像を背景に敷いた帯（teaser-band）の下地。
     文字の可読性を透過に頼らずスクリムで担保する。画像を差し替えても
     文字が読めなくならないよう、文字が載る側は不透明に近い白まで寄せる。
     横組み（左に文字）と縦組み（モバイル・全面）で別の敷き方が要る。 */
  --gradient-band-scrim: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.93) 34%,
    rgba(255, 255, 255, 0.55) 62%,
    rgba(255, 255, 255, 0) 86%
  );
  --gradient-band-scrim-stacked: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.88) 100%
  );
}