/* ============================================================
   tokens.css — CSS 変数のみ。値の正は CLAUDE.md の Style rules と一致させる。
   ブレークポイント(CSS 変数は @media で使えないため、ここに宣言して全ファイルで同じ値を使う)
     sp: 768px 以下 = モバイル
     tb: 769px 〜 1023px = タブレット
     pc: 1024px 以上 = デスクトップ
   ============================================================ */
:root {
  /* ----- 色(CLAUDE.md パレット表) ----- */
  --color-bg: #09090c;
  --color-navy: #303374;
  --color-navy-deep: #14192d;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-accent: #fed800;
  --color-sub: #00a1e9;
  --color-sub-on-navy: #33b4ed; /* ネイビー地専用のシアン。#00a1e9 は 3.9:1 で小さい文字に足りないため、明度だけ上げて 4.8:1 に */
  --color-on-accent: #09090c;
  --color-women: #ff5f69; /* #schedule 専用の例外色(KV の光の筋の赤)。他の場所に広げない */
  --color-men: var(--color-sub);

  /* 派生(パレットの色を透過させただけ。新しい色相は増やさない) */
  --color-line: rgba(255, 255, 255, 0.18);
  --color-overlay: rgba(9, 9, 12, 0.5);
  --color-overlay-strong: rgba(9, 9, 12, 0.85);
  --color-header-bg: rgba(9, 9, 12, 0.88);
  --color-accent-glow: rgba(254, 216, 0, 0.35);
  --color-sub-glow: rgba(0, 161, 233, 0.35);
  --color-line-input: rgba(255, 255, 255, 0.45); /* 入力欄の下線。ネイビー地で 3:1 以上 */

  /* ----- フォント ----- */
  --font-display: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif;
  --font-heading: "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;

  --weight-display: 800;
  --weight-heading: 900;
  --weight-body: 400;
  --weight-bold: 700;

  /* 文字サイズ(clamp で画面幅に追従) */
  --text-display-xl: clamp(3rem, 10vw, 9.5rem);    /* 画面幅いっぱいの英字(THE WORLD BATTLE が1440で1行に収まる上限) */
  --text-display-lg: clamp(2.5rem, 7vw, 6rem);     /* セクションの英字見出し */
  --text-display-md: clamp(2rem, 4.5vw, 3.5rem);   /* 日付・価格 */
  --text-heading-lg: clamp(1.5rem, 3.2vw, 2.5rem); /* 和文の大見出し */
  --text-heading-md: clamp(1.25rem, 2.2vw, 1.625rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;                            /* 英字の小ラベル(シアン) */

  --leading-tight: 0.9;
  --leading-heading: 1.3;
  --leading-body: 1.9;

  --tracking-display: -0.02em;
  --tracking-label: 0.2em;
  --tracking-nav: 0.04em;
  --tracking-lang: 0.08em;
  --hairline: 1px;

  /* ----- 余白スケール ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;
  --space-section: var(--space-8);
  --space-section-sp: var(--space-7);

  /* ----- レイアウト ----- */
  --container: 1120px;
  --container-narrow: 820px;
  --gutter: 1.25rem;
  --header-height: 72px;
  --header-height-sp: 60px;
  --logo-h: 40px;            /* ヘッダーロゴの高さ */
  --logo-h-sp: 30px;
  --footer-logo-w: 360px;
  --footer-logo-w-sp: 280px;
  --footer-banner-w: 240px;  /* フッターの外部リンクバナー(原寸 400×90) */
  --hero-min-h: 560px;       /* 固定ヒーローの最小高さ */
  --vh-load: 100lvh;         /* 文字が画面内に収まる必要があるセクションの高さ。タッチ端末では js/stable-viewport.js が読み込み時の値に固定する */
  --vh-photo: 100lvh;        /* 背景写真の高さ。タッチ端末では js/stable-viewport.js が端末の画面の高さに固定する */
  --hero-media-h-sp: calc(var(--vh-load) * 0.56);  /* モバイルでヒーロー写真に使う高さ */
  --tap: 44px;               /* タップ領域の最小サイズ */
  --icon: 24px;              /* ハンバーガーの線の長さ */
  --line-w: 2px;             /* 下線・ハンバーガーの線の太さ */
  --focus-offset: 3px;       /* フォーカス枠と要素の間 */
  --lift: 2px;               /* hover でボタンを浮かせる量 */
  --reveal-shift: 24px;      /* 出現演出で下からずらす量 */
  --scroll-line-w: 48px;     /* SCROLL 表示の線 */
  --text-nav: 1.125rem;
  --text-nav-lg: 1.25rem;
  --blur: 12px;
  --fullbleed-h: calc(var(--vh-photo) * 1.5); /* フルブリード写真セクションの全高(--vh-photo が sticky で留まる) */
  --parallax-bleed: 15%;     /* パララックス背景を上下にはみ出させる量(動く余地) */
  --gallery-h: 280px;        /* ギャラリー帯の写真の高さ */
  --gallery-h-sp: 200px;
  --gallery-duration: 70s;   /* ギャラリー帯が1周する時間 */
  --map-h: 400px;
  --map-h-sp: 280px;
  --input-h: 3.25rem;
  --textarea-h: 10rem;
  --ticket-map-min-w: 900px;  /* 座席図の最小幅。768px 以下では図だけ横スクロール(768 の表示幅 728px より大きくし、案内文どおり必ずスクロールさせる。縮小率 0.75) */
  --schedule-time-w: 5rem;    /* スケジュール表の時刻の列幅 */
  --hero-exit: var(--vh-load); /* ヒーローの写真が消えきるまでのスクロール量 */
  --hero-zoom: 1.05;          /* ヒーローの写真の拡大率(退場時) */
  --schedule-zoom: 1.08;      /* スケジュールの背景写真の拡大率(セクションを通過する間) */
  --schedule-bg-pos-sp: 36% center; /* 768px 以下の背景写真の位置。縦長の切り抜きに選手を入れる */
  --mfp-overlay-w: 640px;     /* 確認画面(MailFormPro のオーバーレイ)の最大幅 */
  --mfp-loading-size: 40px;   /* 送信中の回転マーク。MailFormPro の configs/config.js の LoadingImage(40×40)と揃える */

  /* ----- 形 ----- */
  --radius: 0;             /* 角丸は使わない(DESIGN.md) */
  --radius-pill: 999px;    /* ボタンのみ */
  --skew: 6deg;            /* 斜めの切断の角度 */
  --cut: 6vw;              /* clip-path で斜めに切る高さ */

  /* ----- 影・光 ----- */
  --shadow-text: 0 2px 24px rgba(9, 9, 12, 0.6);
  --shadow-label: 0 0 6px rgba(9, 9, 12, 0.9), 0 1px 2px rgba(9, 9, 12, 0.9); /* 写真の上の小ラベル。細い字の輪郭を締める */
  --glow-accent: 0 0 32px var(--color-accent-glow);
  --glow-sub: 0 0 32px var(--color-sub-glow);

  /* ----- 動き ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.7s;
  --duration-fast: 0.3s;
  --z-header: 100;
  --z-overlap: 2;          /* 次のセクションに被さる帯(#statement の斜めの下辺、#gallery の下端の影) */
  --z-sticky: 0;
  --z-content: 1;
  --z-mfp-overlay-bg: 1000;      /* 確認画面の暗幕(ヘッダーより上) */
  --z-mfp-overlay: 1001;         /* 確認画面 */
  --z-mfp-loading-screen: 1002;  /* 送信中の暗幕 */
  --z-mfp-loading: 1003;         /* 送信中の回転マーク */
}