/* ============================================================
   MiND CIRCUIT — Tokens
   劇団まんまる第9回公演 コントライブ『MiND CIRCUIT』

   設計の芯: ページ全体が「一息の潜水」。
   公演が70分ノンストップなら、サイトも区切りを作らない。
   セクションの箱・番号ラベル・見出しの繰り返しを持たない。

   残したもの(座長指定): 泡 / スクロールで深くなる海。それ以外はゼロから。
   ============================================================ */

:root {
  /* ---- 海(深度で main.js が書き換える。ここは水面の初期値) ---- */
  --sea-top: #F5F6F7;
  --sea-bot: #E6ECEF;

  /* ---- 墨と白。セクションが .on-light / .on-dark で切り替える ----
     ロゴ(#787A7C)に合わせ、青みの強いスレートから中性グレー系へ寄せてある。
     チラシは本文も見出しも日時も #939598 の1色で組まれており、彩度は2%程度。
     その family に揃えることで、ロゴと本文が同じ声に聞こえる。

     弱い方の色は「その帯で一番暗い背景でも4.5:1を超える」ことが条件。
     浅瀬は最深部で背景が rgb(148,176,185) まで落ちるため、下限は #35373A(実測4.76)。
     色の差が小さいぶん、階層は大きさ・字間・書体で作る(main.js の UI と同値) */
  --ink:      #232527;   /* 水面側の文字 */
  --ink-mid:  #35373A;   /* 同・弱 */
  --ink-hair: #C2C4C6;   /* 同・罫 */

  /* ---- 差し色 ----
     flyer/MiND CIRCUIT-FIX.pdf の「CONTE」のN一文字から実測(300dpi #E19EA7)。
     ★ 白地では 1.9:1 しか出ないので、明るい帯では文字色に使えない。
        使えるのは (a) 塗り(CTAの地色) (b) 深部の文字 の2つだけ */
  --accent: #E19EA7;

  /* --accent を透過させて重ねるための成分。予約導線の泡がこれを使う。
     canvas の泡は膜・縁・芯を別々の不透明度で描いているので、
     CSS側も同じように「1色 + 濃さの違い」で組む。
     ★ --accent と必ず同じ値に保つこと */
  --accent-rgb: 225 158 167;

  /* 差し色の縁。ピンクの面は水面(#F5F6F7)に対して 2.01:1 しか出ず、
     「面としての輪郭」が立たない = ボタンが目立たない原因だった(実測)。
     縁を1段暗いピンクで引くと 3.78:1 になり、形が water から分離する
     (WCAG 1.4.11 の非テキスト3:1も満たす)。色相は --accent と同じ */
  --accent-edge: #B06874;

  /* ---- ロゴの色 ----
     flyer/MiND CIRCUIT-FIX.pdf のタイトルロゴから実測(300dpiで#787A7Cが14,617px)。
     劇団ロゴ(丸マーク)とタイトルロゴの両方をこの1色に揃える(座長指示)。
     深度で振らない固定色。水面で3.88:1、深淵で4.43:1 と両端で視認できる */
  --logo: #787A7C;

  /* ---- 書体 ----
     和文=明朝。1rem未満だけゴシック(明朝は小サイズで横画が飛ぶ)。
     欧文=DIN系を大きく開けて置く */
  --ja:     "Shippori Mincho", serif;
  --ja-g:   "Zen Kaku Gothic New", sans-serif;
  --en:     "Barlow", sans-serif;

  /* ---- 版面 ---- */
  --pad:    clamp(1.25rem, 5vw, 5rem);

  /* 水深計が居座る右の1列。広い画面では縦一列で右端に固定されるので、
     本文がそこへ入ると重なる(実測 1280px幅で 座長の言葉が +79px、
     タイトルが +31px 食い込んでいた)。目盛の実幅87pxに余裕を足した値。
     狭い画面では水深計が最下部の横並びになるので 0 に戻す(下のメディアクエリ) */
  --lane:   0px;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* 深い水の中にいるセクション */
.on-dark {
  --ink:      #F2F3F4;
  --ink-mid:  #B8BBBE;   /* 転換直後の帯で4.5を割らない下限(実測) */
  --ink-hair: #4A4D50;
  color: var(--ink);
}

/* 水面近くのセクション */
.on-light {
  --ink:      #232527;
  /* 浅瀬の最深部では背景が rgb(148,176,185) まで落ちる。
     ここで4.5:1を保てる中性グレーの下限が #35373A(実測4.76) */
  --ink-mid:  #35373A;
  --ink-hair: #C2C4C6;
  color: var(--ink);
}

* { box-sizing: border-box; }

html {
  color: var(--ink);
  font-family: var(--ja);
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #F5F6F7;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--accent); color: #10161C; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}