/* ============================================================================
   pontsukapon — src/assets/css/tokens.css
   ----------------------------------------------------------------------------
   読み込み順（厳守）:
     1. tokens.css        全ページ  §1 シェルトークン ＋ §2 テーマ17トークン既定値
     2. shell.css         全ページ  §3 基礎レイヤ〜§6 法務組版
     3. themes.css        全ページ  html[data-app="..."] の3ブロック
     4. portal.css | app/<slug>.css   ページ単位
   ----------------------------------------------------------------------------
   【上書き規約】アプリ別CSS・ポータルCSSが上書きしてよいのは §2 の
   「テーマトークン」だけ。§1 のシェルトークンは1つも再定義しないこと。
   レビューは「アプリCSSに --sp-* / --fs-* / --lh-* / --ls-* / --r-* /
   --shell-max* / --measure-text / --gutter / --head-h* / --dur-* / --ease /
   --lift / --seal-* / --btn-h / --btn-px / --card-pad / --hair が
   再定義されていないか」だけを見る。それ以外は自由。
   ----------------------------------------------------------------------------
   【シェルの禁則 — 破ると Pareidol の雲が無言で消える】
   html / body / main / .shell-head を包むラッパー、および main の祖先に
     transform / filter / backdrop-filter / opacity<1 /
     will-change / isolation:isolate / contain / perspective / mask
   を書かない。1つでも書いた瞬間にスタッキングコンテキストが生まれ、
   .cloudscape{position:fixed; z-index:-1} が閉じ込められて雲が全滅する。
   backdrop-filter は .shell-head 要素**自身**にのみ許可（雲の祖先ではないため安全）。
   ============================================================================ */


/* ═══ §1  シェルトークン（全ページ不変・上書き禁止） ══════════════════════ */
:root{

  /* --- 書体 family（--font-display / --font-num のみテーマ側で差し替え） --- */
  --font-body : "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --font-mark : "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;

  /* --- 版面 --- */
  --shell-max      : 900px;   /* LP・法務・ポータル本文の共通コンテナ幅 */
  --shell-max-wide : 1120px;  /* ヘッダー・フッター・ポータルの作品行のみ */
  --measure-text   : 640px;   /* 文章の行長上限（法務本文・リード） */
  --gutter         : clamp(20px, 5vw, 40px);
  --head-h         : 56px;
  --head-h-sm      : 48px;    /* <=560px */

  /* --- 余白（4pxグリッド。この梯子以外の値を新規に足さない） --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --sp-block        : clamp(24px, 3.5vw, 36px);   /* 見出し⇄本文 */
  --sp-section      : clamp(56px, 9vw, 96px);     /* セクション上下 */
  --sp-shell-top    : clamp(32px, 6vw, 72px);     /* ヘッダー⇄本文 */
  --sp-shell-bottom : clamp(80px, 11vw, 144px);   /* 本文⇄フッター */

  /* --- タイポスケール（3LPの実測値から起こした9段） --- */
  --fs-micro   : 10.5px;                                   /* eyebrow */
  --fs-note    : 12px;
  --fs-small   : 13px;                                     /* シェル文字 */
  --fs-body    : clamp(15px, 0.90rem + 0.20vw, 15.5px);
  --fs-lead    : clamp(16px, 0.95rem + 0.45vw, 19px);
  --fs-h3      : clamp(17px, 1.00rem + 0.55vw, 20px);
  --fs-h2      : clamp(21px, 1.05rem + 1.15vw, 28px);
  --fs-h1      : clamp(30px, 1.30rem + 3.20vw, 46px);
  --fs-display : clamp(34px, 1.50rem + 4.20vw, 54px);      /* ポータル冒頭のみ */

  --lh-tight : 1.35;
  --lh-head  : 1.55;   /* 句点で改行する h1/h2 用 */
  --lh-body  : 1.9;
  --lh-doc   : 2;      /* 法務本文（こぼれび実測） */

  --ls-micro : .30em;
  --ls-head  : .06em;
  --ls-body  : .02em;
  --ls-mark  : .14em;  /* サイト名の和文 */
  --ls-en    : .5em;   /* サイト名の英字・SUPPORT 等 */

  /* --- かたち --- */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --r-icon   : 22.5%;   /* アプリアイコンの角丸。icons.json frame.radius */
  --r-seal   : 7px;
  --seal-sz  : 28px;
  --seal-sz-lg: 56px;   /* ポータル冒頭のみ */
  --card-r   : var(--r-md);
  --card-pad : clamp(20px, 3vw, 28px);
  --btn-h    : 46px;
  --btn-px   : 22px;
  --rule-w   : 28px;    /* 見出し下の短い罫 */
  --hair     : 1px;

  /* --- 動き（3LPの実測値を1組に統合） --- */
  --ease   : cubic-bezier(.2,.7,.2,1);
  --dur-1  : .2s;    /* hover（3LP共通の実測値） */
  --dur-2  : .5s;    /* 色・gap のゆっくりした変化（こぼれび由来） */
  --dur-3  : 1.1s;   /* 入場 */
  --lift   : -1px;   /* hover の浮き。3LP共通の手癖 */
  --breathe: 3.4s;   /* botch/Pareidol に同名同値で存在する呼吸 */

  /* --- 動き（2026-08-03・ポータルの新デザインから共通層へ上げた5つ）---
     ★★ 名前の地雷を3つ避けてある。**下の別名にしないこと。**
       --ease-inout を --ease にしない  … --ease は cubic-bezier(.2,.7,.2,1)。
         shell と3LP 全部が使っている。上書きすると全ページの手触りが変わる。
       --dur-in / --dur-pop / --dur-step は入場の尺。--dur-1〜3 とは別物。
     ★ shell.css §7 の入場キーフレーム5本がこれらを消費する前提で置いてある。 */
  --ease-inout  : ease-in-out;
  --dur-in      : .58s;   /* 入場（1秒未満） */
  --dur-pop     : .46s;   /* ポップイン */
  --dur-step    : .065s;  /* 左上→右下の時差 1段ぶん */
  --breathe-slow: 2.8s;   /* 常時動く点ひとつぶんの呼吸 */

  /* --- 重なり --- */
  --z-head: 50;
  --z-skip: 99;
}


/* ═══ §2  テーマトークン ══════════════════════════════════════════════════
   アプリ別CSSが上書きしてよいのは以下の21個 ＋ color-scheme プロパティのみ。
     --bg --surface --surface-2
     --fg-1 --fg-2 --fg-3
     --rule --rule-2 --rule-hair
     --accent --accent-2 --accent-soft --accent-line --accent-ink
     --shadow-card --shadow-flat --shadow-lift --shadow-lift-hi
     --font-display --font-num --btn-r
   既定値＝ポータル。ここだけが明暗に追随する。
   アプリテーマは固定（botch は常に夜、こぼれび は常に紙）。
   ----------------------------------------------------------------------------
   ★★ 2026-08-03: **和紙（#F6F3EC 系）を無彩（#F3F3F3 系）に置き換えた。**
     dw-a（トップページの新デザイン）が body 側で丸ごと上書きしていた値を
     そのままここへ上げたもの。値は1つも変えていない。
     コントラスト実測（すべて WCAG AA 4.5:1 以上）
       明 地 #F3F3F3 / 面 #FFFFFF  fg-1 17.15:1 / fg-2 7.99:1 / fg-3 5.25:1
       暗 地 #0F0F0F / 面 #191919  fg-1 16.92:1 / fg-2 8.54:1 / fg-3 5.70:1
   ★ --rule-hair / --shadow-flat / --shadow-lift / --shadow-lift-hi の4つは
     同じときに追加した（旧 --dw-hair / --dw-flat / --dw-lift / --dw-lift-hi）。
     ★★ **--shadow-lift を --lift にしないこと。**§1 の --lift は translateY の
       量（-1px）で、.btn:hover / a.card:hover / .badge-link:hover の3つが
       使っている。box-shadow の文字列を入れると3つのホバーが無言で死ぬ。
     ★★ **--rule-hair を --hair にしないこと。**§1 の --hair は線の**太さ**。
       色を入れると border: var(--hair) solid ... が全部壊れる。
     ★ themes.css の3アプリはこの4つを持たない（消費者がポータルだけなので
       :root の値がそのまま残る。害は無い）。LP が使い始める日に足すこと。
   ======================================================================== */

:root,
html[data-app="portal"]{
  color-scheme: light;
  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);      /* icons.json frame.hairline.light */
  --accent      : #101010;              /* 壁は無彩。色はアプリのもの */
  --accent-2    : #656565;
  --accent-soft : rgba(16,16,16,.05);
  --accent-line : rgba(16,16,16,.22);
  --accent-ink  : #F3F3F3;
  --shadow-card : 0 4px 18px rgba(0,0,0,.07);
  --shadow-flat : 0 1px 3px rgba(0,0,0,.05);
  --shadow-lift : 0 6px 18px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.05);
  --shadow-lift-hi: 0 16px 34px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.07);
  --font-display: var(--font-body);
  --font-num    : var(--font-body);
  --btn-r       : var(--r-md);
}

@media (prefers-color-scheme: dark){
  html[data-app="portal"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #242424;
    --fg-1        : #F2F2F2;
    --fg-2        : #AEAEAE;
    --fg-3        : #8C8C8C;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);   /* icons.json frame.hairline.dark */
    --accent      : #F2F2F2;
    --accent-2    : #8C8C8C;
    --accent-soft : rgba(242,242,242,.07);
    --accent-line : rgba(242,242,242,.24);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 10px 30px rgba(0,0,0,.55);
    --shadow-flat : 0 1px 4px rgba(0,0,0,.35);
    --shadow-lift : 0 10px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
    --shadow-lift-hi: 0 20px 40px rgba(0,0,0,.62), 0 5px 12px rgba(0,0,0,.45);
  }
  /* 明示トグル（将来 <html data-theme="light"> を付けたとき暗転を打ち消す） */
  html[data-app="portal"][data-theme="light"]{
    color-scheme: light;
    --bg:#F3F3F3; --surface:#FFFFFF; --surface-2:#E7E7E7;
    --fg-1:#101010; --fg-2:#4A4A4A; --fg-3:#656565;
    --rule:rgba(16,16,16,.12); --rule-2:rgba(16,16,16,.07);
    --rule-hair:rgba(0,0,0,.08);
    --accent:#101010; --accent-2:#656565;
    --accent-soft:rgba(16,16,16,.05); --accent-line:rgba(16,16,16,.22);
    --accent-ink:#F3F3F3;
    --shadow-card:0 4px 18px rgba(0,0,0,.07);
    --shadow-flat:0 1px 3px rgba(0,0,0,.05);
    --shadow-lift:0 6px 18px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.05);
    --shadow-lift-hi:0 16px 34px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.07);
  }
}
html[data-app="portal"][data-theme="dark"]{
  color-scheme: dark;
  --bg:#0F0F0F; --surface:#191919; --surface-2:#242424;
  --fg-1:#F2F2F2; --fg-2:#AEAEAE; --fg-3:#8C8C8C;
  --rule:rgba(242,242,242,.14); --rule-2:rgba(242,242,242,.08);
  --rule-hair:rgba(255,255,255,.10);
  --accent:#F2F2F2; --accent-2:#8C8C8C;
  --accent-soft:rgba(242,242,242,.07); --accent-line:rgba(242,242,242,.24);
  --accent-ink:#0F0F0F;
  --shadow-card:0 10px 30px rgba(0,0,0,.55);
  --shadow-flat:0 1px 4px rgba(0,0,0,.35);
  --shadow-lift:0 10px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
  --shadow-lift-hi:0 20px 40px rgba(0,0,0,.62), 0 5px 12px rgba(0,0,0,.45);
}