/*
 * tokens.css — S.Factory デザイントークン
 * このファイルのみを編集することで配色・フォント・余白を一括変更できます。
 * style.css は var() でこれらを参照します。!important 禁止。
 *
 * 役割分担:
 *   赤 (--accent-red 系) = 装飾アクセント (下線・サイドノート等)
 *   金 (--gold 系)       = CTAボタン専用 (.btn--gold のみ)
 *   紺 (--navy 系)       = 構造・テキスト・ナビ
 */

:root {
  /* ===== Color ===== */
  --navy:        #13314F;
  --navy-ink:    #0C2138;
  --navy-900:    #0E2036;
  --paper:       #FFFFFF;
  --mist:        #F4F6F8;
  --ink:         #2B2F36;
  --slate:       #5B6470;
  --line:        #D7DCE2;
  /* --gold: CTAボタン専用 (#A8803C) — ボタン内 18px/700 で AA Large 3:1 達成
     小テキストで白文字 AA 4.5:1 が必要な箇所は --gold-aa を使うこと */
  --gold:        #A8803C;
  --gold-deep:   #8A6530;
  --white:       #FFFFFF;

  /* アクセントカラー: 赤 = 装飾下線・サイドノート等の装飾アクセント専用
     白地で AA 4.5:1 を満たす --accent-red-ink で小テキストに使用可 */
  --accent-red:     #C84D3D;
  --accent-red-ink: #9B2E24;

  /* ペーパートーン: ヒーロー左パネル背景・スクリム */
  --paper-warm: #FFFDF8;

  /* ヒーロー墨テキスト */
  --ink-hero:     #0B0B0B;
  --ink-line:     #111111;
  --ink-hero-sub: #323232;

  /* on-navy: ネイビー背景上のテキスト色（#E7ECF2 == rgb(231,236,242)） */
  --on-navy:     #E7ECF2;

  /* slate-on-dark: --navy-900 上で WCAG AA (≥4.5:1) を満たす明るいスレート */
  --slate-on-dark: #9AA4B0;

  /* オーバーレイ系トークン */
  --overlay-card-bottom: rgba(12, 33, 56, 0.85);
  --overlay-card-mid:    rgba(12, 33, 56, 0.55);
  --overlay-card-top:    rgba(12, 33, 56, 0.20);

  /* ボタンボーダー（半透明） */
  --btn-border-primary: rgba(130, 160, 200, 0.35);
  --btn-border-primary-hover: rgba(130, 160, 200, 0.6);
  --btn-border-white: rgba(255, 255, 255, 0.75);
  --btn-bg-white-hover: rgba(255, 255, 255, 0.08);

  /* on-navy 半透明バリエーション */
  --on-navy-60: rgba(231, 236, 242, 0.60);
  --on-navy-35: rgba(231, 236, 242, 0.35);
  --on-navy-85: rgba(231, 236, 242, 0.85);
  --on-navy-88: rgba(231, 236, 242, 0.88);

  /* フッターボトムボーダー */
  --footer-border: rgba(255, 255, 255, 0.12);

  --gold-aa:     #7F5C1F;   /* 未使用予約値。小テキストにゴールド文字を新設する際の AA 準拠値 (WCAG AA 4.5:1) */

  /* ===== Typography =====
     ⚠ --f-display (Shippori Mincho B1) は hero__heading 専用。index.html のみ読み込む。
        変更時は index.html <head> の Google Fonts <link> の family= パラメータも必ず同期すること。
        works/company/contact は Noto Serif JP / Noto Sans JP / Oswald の3ファミリー構成。 */
  --f-display: "Shippori Mincho B1", serif;
  --f-serif: "Noto Serif JP", serif;
  --f-sans:  "Noto Sans JP", system-ui, sans-serif;
  --f-en:    "Oswald", sans-serif;

  /* ===== Spacing scale (8px base) ===== */
  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-8:  96px;
  --s-10: 120px;

  /* ===== Layout ===== */
  --maxw:     1856px;
  --gutter:   clamp(20px, 5vw, 64px);
  --header-h: 80px;
  --radius:   2px;
  --pad-section: clamp(48px, 6vw, 76px);

  /* ===== Hero image =====
   * ヒーロー画像は index.html の .hero__slide 各要素の --slide-img で管理。
   * 本番ヒーロー画像支給時は先頭スライドの url() を差し替える。 */

  /* ===== Animation tokens ===== */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-land: cubic-bezier(.34,1.02,.44,1);   /* 3D入場の着地(≤2%オーバーシュート) */
  --card-tilt: 5deg;                            /* 3D入場 rotateX 初期角 */
  --dur-0: .15s;   /* マイクロインタラクション（リンクホバー等） */
  --dur-1: .4s;
  --dur-2: .6s;
  --dur-3: .9s;
  --stagger: .08s;   /* カード/行の段差 */

  /* 長尺アニメ用トークン */
  --dur-kenburns: 14s;   /* Ken Burns スライド単位の微ズーム */
  --failsafe-delay: 6s;  /* フェイルセーフアニメ(sf-open-failsafe*)の遅延。animations.css shorthand と animation-delay リストの両方で参照する */

  /* ===== Hero staging 遅延トークン (v7 Motion Spec 準拠) =====
   * T0 = sf-reveal 付与瞬間。1行目は T0+0.10s、行間段差 0.12s。
   * --hero-delay-base: 1行目の遅延
   * --hero-delay-step: 行間の段差 (nth-child は calc で導出)
   * --hero-delay-lead: hero__lead 遅延
   * --hero-delay-sub:  hero__sub 遅延
   * --hero-delay-side: hero__side-note 遅延
   * --hero-delay-detail: hero__detail 遅延 */
  --hero-delay-base:    .10s;
  --hero-delay-step:    .12s;
  --hero-delay-lead:    .62s;
  --hero-delay-sub:     .78s;
  --hero-delay-side:   1.10s;
  --hero-delay-detail: 1.20s;

  /* ヒーロースライド3枚の1周期。1枚あたり表示 8s + フェード 2s。
     ⚠ 枚数を変えたら animations.css のキーフレームと nth-child の遅延も作り直すこと */
  --dur-hero-cycle: 30s;

  /* 移動距離トークン */
  --rise-sm:   12px;
  --rise-md:   20px;
  --rise-lg:   28px;
  --rise-rev:  24px;

  /* ズーム率トークン */
  --zoom-kenburns: 1.06;
  --zoom-icon-in:  0.82;
  --zoom-company:  1.08;
  --zoom-hover-sm: 1.04;
  --zoom-hover-md: 1.06;

  /* ===== Transparent header (page-home) ===== */
  --header-bg-solid:        var(--white);
  --header-bg-transparent:  transparent;
  --header-border-solid:    var(--line);
  --header-border-transparent: transparent;
  --header-on-transparent:  rgba(255, 255, 255, 0.95);
  --header-cta-bg-transparent:     transparent;
  --header-cta-border-transparent: rgba(255, 255, 255, 0.75);
  --header-cta-color-transparent:  rgba(255, 255, 255, 0.95);
  --header-cta-bg-solid:           var(--navy);
  --header-cta-border-solid:       var(--btn-border-primary);
  --header-cta-color-solid:        var(--white);

  --header-scrim-top:   rgba(8, 16, 28, 0.62);
  --header-scrim-floor: rgba(8, 16, 28, 0.18);

  /*
   * JS が動的に書き込む CSS カスタムプロパティは --sf-* 名前空間を使用。
   *   --sf-stagger-i : スタッガーインデックス (JS → CSS)
   *   --sf-parallax-y: パララックスオフセット px (JS → CSS)
   */
}