/* 見た目の値（色・角丸・影・書体・寸法）。値はここにだけ書き、ほかのファイルは var() で使う。
   決まりの説明は DESIGN.md。白い地に、映画館の赤を主役、ポップコーンの黄色と空色を小さな添え色に使う
   （文字の色は WCAG AA の対比を満たす組み合わせだけ）。
   前半が DESIGN.md の名前（新しく書く CSS はこちらを使う）、後半は前からある名前（同じ値を指す） */
:root {
  color-scheme: light;

  /* ---- DESIGN.md の色 */
  --canvas: #ffffff; /* ページの地 */
  --paper: #ffffff; /* 浮かせる面（シート・モーダル） */
  --tint: #f5f6fa; /* 少しだけ色のある面（検索欄・まとまり・PC の座席表の列・フッター） */
  --ink: #1c1d24;
  --sub: #5b6070;
  --line: #e6e8ef;
  --line-strong: #d5d8e1;
  --red: #e0213f; /* 白い文字が乗る（対比 4.7） */
  --red-ink: #c8102e; /* 白・淡い面の上の赤い文字 */
  --yellow: #ffc83d; /* 上の文字は --ink */
  --sky: #39a9f4; /* 面・飾りだけ（白い文字は乗せない。上の文字は --ink） */
  --sky-ink: #086a9c; /* 白・淡い面の上の青い文字、白い文字が乗る青 */
  --red-soft: #ffeaee;
  --yellow-soft: #fff4d6;
  --sky-soft: #e3f3fe;
  --stage: #0e0f14; /* 3D の背景・3D の上の操作 */

  /* スクリーンの種類のステッカー（.sticker・.fmt の data-k）。DESIGN.md: IMAX=空色、Dolby=墨、ScreenX=黄、4DX・MX4D=赤 */
  --fmt-imax: var(--sky);
  --fmt-imax-ink: var(--ink);
  --fmt-dolby: var(--ink);
  --fmt-dolby-ink: #fff;
  --fmt-screenx: var(--yellow);
  --fmt-screenx-ink: var(--ink);
  --fmt-4d: var(--red);
  --fmt-4d-ink: #fff;
  --fmt-other: var(--sky-soft); /* ULTIRA・BESTIA など */
  --fmt-other-ink: var(--sky-ink);

  /* ---- 前からある名前（上の色を指す） */
  --bg: var(--canvas);
  --surface: var(--paper);
  --prose: #2b2e38;
  --error: var(--red-ink);
  --accent: var(--red);
  --accent-ink: var(--red-ink);
  --accent-weak: var(--red-soft);
  --accent-tint: #fff6f7;
  --text-on-dark: #fff; /* 赤や黒の面の上の白い文字 */
  --pop-yellow: var(--yellow);
  --pop-yellow-weak: var(--yellow-soft);
  --pop-blue: var(--sky-ink);
  --pop-blue-ink: var(--sky-ink);
  --pop-blue-weak: var(--sky-soft);

  /* 見え方の判定 */
  --good: #0f7a54;
  --good-weak: #e3f4ec;
  --warn: #8a5a00;
  --warn-weak: #fdf0e1;

  /* 座席表 */
  --seat: #c3c8d2;
  --seat-thumb: #9aa1ad;
  --seat-premium: #b8803f;
  --seat-pair: #c0668a;
  --seat-wheelchair: #4f86d0;
  --usual: #2563eb;
  --usual-weak: #eef4ff;
  --gold: #ffc933;
  --gold-weak: #fff3c4;
  --gold-glow: rgba(255, 190, 40, 0.9);
  --gold-glow-strong: rgba(255, 190, 40, 0.95);

  /* 見やすさの色分け（視野角の5段階: かなり近い〜遠い） */
  --heat-0: #e5484d;
  --heat-1: #f59e0b;
  --heat-2: #22a06b;
  --heat-3: #60a5fa;
  --heat-4: #9aa3b2;

  /* 立体の画面と、その上に重ねる暗い部品 */
  --stage-bar: #0d0e12;
  --stage-seg: #15161b;
  --stage-seg-line: #2a2c33;
  --overlay: rgba(10, 12, 16, 0.72);
  --overlay-strong: rgba(10, 12, 16, 0.9);
  --overlay-ink: #f2f3f5;
  --overlay-ink-soft: rgba(242, 243, 245, 0.72);
  --on-dark-muted: rgba(255, 255, 255, 0.82);
  --on-ink-muted: rgba(255, 255, 255, 0.7);
  --live-dot: #ff5a6a;
  --overlay-line: rgba(255, 255, 255, 0.18);
  --on-dark-sub: #a9adb8;
  --on-dark-ink: #d8dae0;
  --on-dark-link: #ff9aa8;
  --on-dark-selected: #4a141c;
  --on-dark-selected-ink: #ffc2ca;
  --overlay-glass: rgba(12, 13, 18, 0.58); /* 全画面の座席表（すりガラス） */
  --overlay-seat: rgba(205, 210, 220, 0.6); /* 暗い面の上の通常の席 */
  --overlay-screen: rgba(255, 242, 226, 0.88); /* 暗い面の上のスクリーンの弧 */
  --backdrop: rgba(10, 12, 16, 0.55);
  --backdrop-light: rgba(10, 12, 16, 0.42);
  /* トップの最初の画面（暗い帯・座席表の面・判定の色） */
  --fv-band: #0b0c10;
  --fv-panel: #15161c;
  --fv-panel-line: rgba(255, 255, 255, 0.08);
  --fv-seat: rgba(214, 219, 230, 0.34);
  --fv-seat-hover: rgba(255, 255, 255, 0.85);
  --fv-good: #5fd4a0; /* 暗い面の上の「ちょうどいい」など（帯の上で対比 10.6） */
  --fv-warn: var(--yellow);
  --vignette: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);

  /* 角丸（面は 14px、ボタン・札は丸い端） */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  /* 影（控えめ。浮かせる面だけ） */
  --shadow-paper: 0 8px 24px rgba(28, 29, 36, 0.08);
  --shadow: 0 1px 2px rgba(28, 29, 36, 0.05), 0 4px 14px rgba(28, 29, 36, 0.06);
  --shadow-lift: 0 2px 4px rgba(28, 29, 36, 0.06), 0 12px 28px rgba(28, 29, 36, 0.12);
  --shadow-accent: 0 4px 14px rgba(224, 33, 63, 0.28);
  --shadow-accent-strong: 0 8px 24px rgba(224, 33, 63, 0.3);
  --shadow-mark: 0 2px 5px rgba(43, 10, 18, 0.28); /* ロゴの影（filter: drop-shadow の形） */
  --shadow-sticker: 0 1px 0 rgba(28, 29, 36, 0.12), 0 2px 6px rgba(28, 29, 36, 0.12);
  --shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.25);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-premium-seat: inset 0 -3px 0 rgba(0, 0, 0, 0.18);

  /* 書体: 見出しは M PLUS 1（日本語）、本文は Noto Sans JP、欧文と数字は Manrope（等幅の数字が使える）。
     見出しと数字の並びは Manrope を先に置き、欧文と数字だけ Manrope で、かなと漢字は後ろの書体で組む */
  --font-head: 'Manrope', 'M PLUS 1', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui,
    sans-serif;
  --font-num: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  /* 見出しの字間（Google Fonts の配信では仮名の詰め palt が効かないので、少しだけ詰める） */
  --head-tracking: -0.02em;

  /* 余白（左右は端末の切り欠きを避ける） */
  --gutter-left: max(16px, env(safe-area-inset-left, 0px));
  --gutter-right: max(16px, env(safe-area-inset-right, 0px));
  /* 中身の最大の幅 */
  --content: 1120px;

  /* 動き: 短く、少し弾む */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 見え方の画面（スマホ）: たたんだシートの高さ */
  --sheet-peek: 116px;
}

:root:lang(en) {
  --head-tracking: -0.015em;
  /* 英語の本文も欧文の Manrope で組む（かなと漢字の館名などは Noto Sans JP） */
  --font-body: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
}

/* 中国語（簡体字）の表示: 簡体字の字形がある書体にする（Noto Sans SC は中国語を選んだときだけ ui/lang.js が読み込む）。
   M PLUS 1 には簡体字が無いので、見出しも Noto Sans SC（欧文と数字は Manrope） */
:root:lang(zh-Hans) {
  --head-tracking: 0;
  --font-head: 'Manrope', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans JP',
    system-ui, sans-serif;
}