/* ============================================================
   tokens.css — ペットシッターOIPC 公式サイト 共通デザイントークン
   出典: ART-DIRECTION.md v3 §1〜§4 ／ 08_足す技法_subaru基準.md（実測値）
   作成: 2026-08-21 / frontend-dev

   🚨 このファイルの絶対ルール
   1. 無彩色（#000 / #fff / #888 のように R=G=B になる色）を1つも書かない
   2. --accent (#7D9BB0) は「面」専用。文字色にもボタン塗りにも使わない
      （対 --paper 2.80 ／ 白文字を乗せても 2.92。どちらもWCAG不適合）
   3. 🔑 判断の原則（E案の診断・2026-08-21）
      **--on-anchor を使ってよいのは「面も文字も一緒に反転する場所」だけ。
        .scrim のように面が反転しない場所では --on-scrim を使う。**
      面が反転するか／しないかで決める。「濃い面だから」で選ばない。

      濃い面の上の文字は純白を使わない。ただし2種類あるので取り違えないこと
      --on-anchor … 「--anchor の面」の上の文字。🔁 テーマで反転する
      --on-scrim  … 「両テーマとも暗い面」（スクリム帯・ヒーローの色面）の上の文字。
                    🚫 反転しない。ここに --on-anchor を使うとダークで 1.22:1 になる
   4. 外部参照（@import / url() / Webフォント）を1件も書かない
   ============================================================ */

:root {
  /* ── 色：地と文字 ─────────────────────────────── */
  --paper:      #FBFAF8;  /* 地。純白でない・わずかに温かい */
  --paper-2:    #F4F1EC;  /* セクションを「面」で仕切るときの二番目の地 */
  --surface:    #F0F3F5;  /* 淡いブルーグレーの面（subaru --silverLight 実測値） */
  --card-bg:    #FEFDFB;  /* カードの地。純白の代わり */
  --ink:        #2F3A42;  /* 本文。対 --paper 11.15 */
  --ink-soft:   #5C6B75;  /* 補助文字。対 --paper 5.31（AA・AAAは不可） */
  --line:       #DDE4EA;  /* カードの縁。1px。セクションの仕切りには使わない */

  /* ── 色：アンカー（視線の着地点） ───────────────── */
  --anchor:     #2E4257;  /* 主。見出し・リンク・CTA文字・アイコン線。対 --paper 9.90 */
  --anchor-deep:#1F3040;  /* 最も締めたい1点・ホバー時の塗り */
  --anchor-2:   #4E6C82;  /* 準アンカー。対 --paper 5.31。補助的な強調にのみ */
  --on-anchor:  #FBFAF8;  /* 濃い面の上に乗せる文字。🚨 #fff は使わない */

  /* ── 色：アクセント（面積1%以下・面としてのみ） ──── */
  --accent:     #7D9BB0;  /* 🚨 面専用。文字にもボタン塗りにも使用禁止 */
  --accent-soft:#E8EEF2;  /* 淡いブルーの面 */
  --accent-2:   #E9D7D5;  /* 淡いピンクの面。1画面に1箇所だけ */

  /* ── 色：機能色 ───────────────────────────────── */
  --focus:      #1F3040;  /* :focus-visible のアウトライン */
  --scrim:      rgba(31, 48, 64, .88);  /* 写真の上に敷く単色帯 */

  /* 🚨 --on-scrim は「テーマで反転しない明色」。ライトでもダークでも同じ値。
     スクリム帯・ヒーローの色面は【両テーマとも暗い】ので、
     ここに --on-anchor（ダークで暗色へ反転する）を使うと文字が読めなくなる。
     暗い面の上の文字は必ず --on-scrim を使うこと。 */
  --on-scrim:   #FBFAF8;
  --hero-from:  #2E4257;  /* 写真が無いときのヒーロー面 */
  --hero-via:   #3A5570;
  --hero-to:    #4E6C82;
  --veil:       rgba(251, 250, 248, .06); /* ヒーロー面の中に置く巨大な淡色の円 */

  /* ── 8pxグリッド（subaru実測。「なんとなく25px」を作らない） ── */
  --s4:  4px;  --s8:  8px;  --s12: 12px; --s16: 16px; --s24: 24px;
  --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px; --s80: 80px;
  --block:  64px;  /* セクション間（SP）。PCで80pxへ */
  --gutter: 24px;  /* 左右余白（SP）。PCで40pxへ */

  /* ── カードのグリッド（subaru実測：縦gapは横gapの2倍） ── */
  --grid-col-gap: 20px;
  --grid-row-gap: 40px;

  /* ── 幅 ─────────────────────────────────────── */
  --w-max:    1160px;  /* コンテンツ最大幅 */
  --w-text:   32em;    /* 本文1行 = 全角24〜30字 */
  --w-btn:    326px;   /* CTA（PC）。SPは100% */
  --header-h: 56px;

  /* ── 形（角丸は3値だけ） ───────────────────────── */
  --r-card:   8px;     /* カード。subaru実測で26回＝支配的 */
  --r-pill:   100vw;   /* ボタン */
  --r-circle: 50%;     /* 円 */

  /* ── タイポ ───────────────────────────────────
     🎉 Noto Sans JP は Win10/11 に標準搭載済み（2025-04 KB5055518）。
     外部読み込みは不要。system-ui は使わない。游ゴシックは先頭に置かない。 */
  --font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic Medium", Meiryo, sans-serif;
  --fw-normal: 400;    /* 🚨 400と700の2段のみ。メイリオは2ウェイトしか持たない */
  --fw-bold:   700;
  --fs-body:   16px;   /* シニアの飼い主が読むため subaru の14pxより上げる */
  --fs-small:  13px;
  --fs-lead:   18px;
  --fs-h3:     20px;
  --fs-h2:     clamp(24px, 3.2vw, 28px);
  --fs-h1:     clamp(28px, 4.2vw, 46px);   /* ジャンプ率 約3.3倍（subaru実測） */
  --lh-body:   1.9;
  --lh-head:   1.4;

  /* ── モーション ──────────────────────────────── */
  --dur:       .3s;                            /* 既定。ホバー・状態変化 */
  --ease:      ease-in-out;
  --dur-hero:  .7s;                            /* 見せ場1〜2箇所だけ */
  --ease-hero: cubic-bezier(.19, 1, .22, 1);   /* easeOutExpo */
  --move:      16px;                           /* フェードインの移動距離 */

  /* ── 影：使ってよいのは「浮くUI」のみ ───────────
     🚨 カードに影を付けない。テンプレ臭さの正体はこれ（実測7サイト中5サイトが0件） */
  --shadow-float: 0 0 16px 0 rgba(31, 48, 64, .18);

  color-scheme: light dark;
}

@media (min-width: 769px) {
  :root { --block: 80px; --gutter: 40px; }
}

/* ============================================================
   ダークモード
   ART-DIRECTION v3 に規定がないため、v3の色相から導出し
   全ペアのコントラストを計算して検証した（_納品書.md に実測値）
   ※ prefers-color-scheme と data-theme の両対応。
     data-theme="light" が付いていれば OS がダークでもライトを維持する
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1A2027;
    --paper-2:    #212932;
    --surface:    #263039;
    --card-bg:    #202831;
    --ink:        #E3E8EC;
    --ink-soft:   #A7B6C1;
    --line:       #38454F;

    --anchor:     #A9C4D6;
    --anchor-deep:#C9DCE9;
    --anchor-2:   #7D9BB0;
    --on-anchor:  #161C22;

    --accent:     #4E6C82;
    --accent-soft:#25333E;
    --accent-2:   #3E3230;

    --focus:      #C9DCE9;
    --scrim:      rgba(11, 15, 19, .88);
    /* 🚨 --on-scrim はライトと同じ値。反転させてはいけない */
    --on-scrim:   #FBFAF8;
    --hero-from:  #1F3040;
    --hero-via:   #2A3D50;
    --hero-to:    #3A5570;
    --veil:       rgba(227, 232, 236, .05);

    --shadow-float: 0 0 16px 0 rgba(11, 15, 19, .45);
  }
}

:root[data-theme="dark"] {
  --paper:      #1A2027;
  --paper-2:    #212932;
  --surface:    #263039;
  --card-bg:    #202831;
  --ink:        #E3E8EC;
  --ink-soft:   #A7B6C1;
  --line:       #38454F;

  --anchor:     #A9C4D6;
  --anchor-deep:#C9DCE9;
  --anchor-2:   #7D9BB0;
  --on-anchor:  #161C22;

  --accent:     #4E6C82;
  --accent-soft:#25333E;
  --accent-2:   #3E3230;

  --focus:      #C9DCE9;
  --scrim:      rgba(11, 15, 19, .88);
  /* 🚨 --on-scrim はライトと同じ値。反転させてはいけない */
  --on-scrim:   #FBFAF8;
  --hero-from:  #1F3040;
  --hero-via:   #2A3D50;
  --hero-to:    #3A5570;
  --veil:       rgba(227, 232, 236, .05);

  --shadow-float: 0 0 16px 0 rgba(11, 15, 19, .45);
}