/* ============================================================
   YAOYOROA — tokens.css / デザイントークン（唯一の真実）
   ------------------------------------------------------------
   確定デザイン: pattern-X-integrated-neoncity（夜のネオン未来都市・統合版）
   発注者が「確定」承認済み。この :root を全 CSS / 全ページが var(--token)
   経由で参照する。色・余白・フォント・モーションのハードコードは原則禁止
   （hero stage の精密な発光値のみ例外）。

   ★ Phase 4 で確定 / Phase 8 で無改変コピー ★
   このファイルは Phase 8 で WordPress テーマへ一字一句変えずにコピーされる。
   変更が必要になった場合は Phase 7 に差し戻すこと（Phase 8 での改変は禁止）。
   ============================================================ */

:root {

  /* ── 1. Color ─────────────────────────────────────────────
     pattern-X の :root から移植。純白 #fff / 純黒 #000 は地色に使わない。
     ink 系は bg 上で WCAG AA（本文 4.5:1 / 大型 3:1）を満たす。 */

  /* 夜 — night base（地色） */
  --bg:            #070A14;   /* 夜・基調面（純黒は不使用） */
  --bg-2:          #0A0F1E;   /* 一段明るい面・カード/セクション区切り */
  --bg-3:          #05070F;   /* 最暗部・フッター/フッタ手前の落とし */
  --bg-panel:      #0B1322;   /* 読みパネル（本文を載せる落ち着いた面） */
  --bg-elev:       #101A30;   /* 浮かせた面・入力欄/ホバー面 */

  /* 文字（ink） */
  --ink:           #EAF2FF;   /* 本文 primary（on --bg ≈ 15:1 AAA） */
  --ink-soft:      #C3D0E8;   /* サブコピー（on --bg ≈ 10:1 AA） */
  --ink-faint:     #8C9BBE;   /* ラベル/メタ（on --bg ≈ 5.2:1 AA） */

  /* シアン */
  --cyan:          #2DE2E6;   --cyan-hi:  #86F2F4;   --cyan-lit: #B6FBFF;
  /* マゼンタ */
  --mag:           #FF2D95;   --mag-hi:   #FF6FB6;   --mag-lit:  #FFB3D9;
  /* 電光青 */
  --blue:          #3B5BFF;   --blue-2:   #5B6CFF;   --blue-hi:  #7E92FF;
  /* 紫 */
  --violet:        #8A4FFF;   --violet-hi:#A878FF;
  /* 金（広面積禁止・ラベル/細罫/数値アクセント） */
  --kin:           #E8C36B;   --kin-lit:  #FFE6A6;
  /* 朱（ブランドヒート・CTA・一点強調） */
  --aka:           #C8102E;   --aka-hi:   #FF3B53;   --aka-lit:  #FF3B57;
  /* 白に近い発光白（純白の代替・テキスト塗りには使わない） */
  --white:         #FBFDFF;

  /* 罫線・ヘアライン */
  --hair:          rgba(234, 242, 255, .12);   /* 標準ヘアライン */
  --hair-strong:   rgba(234, 242, 255, .22);   /* 区切り強調 */
  --hair-cyan:     rgba(45, 226, 230, .34);    /* シアン罫（ghost ボタン等） */
  --hair-mag:      rgba(255, 45, 149, .30);    /* マゼンタ罫 */
  --hair-gold:     rgba(232, 195, 107, .30);   /* 金の細罫 */

  /* セマンティック別名（コンポーネントから意味で参照する用） */
  --color-bg:           var(--bg);
  --color-bg-soft:      var(--bg-2);
  --color-bg-deep:      var(--bg-3);
  --color-text:         var(--ink);
  --color-text-soft:    var(--ink-soft);
  --color-text-faint:   var(--ink-faint);
  --color-accent:       var(--cyan);     /* 既定アクセント=シアン（発光） */
  --color-accent-2:     var(--mag);      /* 第二アクセント=マゼンタ */
  --color-cta:          var(--aka);      /* CTA=朱 */
  --color-cta-hi:       var(--aka-hi);
  --color-line:         var(--hair);

  /* グロウ（発光）影 — 世界観の核。値はトークン化して使い回す */
  --glow-cyan:    0 0 16px rgba(45, 226, 230, .42), 0 0 36px rgba(45, 226, 230, .18);
  --glow-mag:     0 0 16px rgba(255, 45, 149, .42), 0 0 36px rgba(255, 45, 149, .18);
  --glow-blue:    0 0 16px rgba(59, 91, 255, .42),  0 0 36px rgba(59, 91, 255, .18);
  --glow-aka:     0 0 16px rgba(200, 16, 46, .50),  0 0 36px rgba(200, 16, 46, .20);
  --glow-gold:    0 0 14px rgba(232, 195, 107, .40),0 0 28px rgba(232, 195, 107, .16);
  --glow-soft:    0 10px 30px rgba(5, 7, 15, .5);   /* 通常のドロップ影（夜に沈める） */


  /* ── 2. Typography ────────────────────────────────────────
     確定フォント（DESIGN.md 禁止フォントは一切不使用）。
     和文=Zen Kaku Gothic New / 雅=Zen Old Mincho
     欧文=Orbitron / 看板=Bebas Neue / UI=Chakra Petch / HUD=IBM Plex Mono
     ※ EN serif アクセント（任意）=Cormorant Garamond */
  --font-body:     "Zen Kaku Gothic New", sans-serif;   /* 本文・既定 */
  --font-mincho:   "Zen Old Mincho", serif;             /* 雅・大見出し/一文字 */
  --font-orbitron: "Orbitron", sans-serif;              /* 欧文ワードマーク/数値見出し */
  --font-bebas:    "Bebas Neue", sans-serif;            /* 看板・統計数値 */
  --font-chakra:   "Chakra Petch", sans-serif;          /* UI・ナビ・ラベル */
  --font-mono:     "IBM Plex Mono", monospace;          /* HUD・eyebrow・コード */
  --font-serif-en: "Cormorant Garamond", "Zen Old Mincho", serif; /* EN serif アクセント */

  /* セマンティック別名 */
  --font-display:  var(--font-mincho);    /* 大見出し（格） */
  --font-en:       var(--font-orbitron);  /* 英字見出し */

  /* フォントサイズ（clamp で 375→1200+ を 1 トークンで吸収） */
  --text-xs:    clamp(0.69rem, 0.66rem + 0.12vw, 0.75rem);   /* 11–12px ラベル */
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);/* 13–14px メタ */
  --text-base:  clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);    /* 15–16px 本文 */
  --text-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17–19px リード */
  --text-xl:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 20–24px 小見出し */
  --text-2xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);        /* 24–32px */
  --text-3xl:   clamp(2rem, 1.5rem + 2.2vw, 2.75rem);        /* 32–44px section-title */
  --text-4xl:   clamp(2.5rem, 1.7rem + 3.6vw, 3.75rem);      /* 40–60px */
  --text-5xl:   clamp(3rem, 1.8rem + 5.4vw, 4.75rem);        /* 48–76px hero 見出し */
  --text-hero:  clamp(2.875rem, 1.2rem + 8.5vw, 6.5rem);     /* 46–104px hero colossal */

  /* 行高 */
  --leading-tight:   1.18;   /* colossal 見出し */
  --leading-snug:    1.32;   /* 見出し */
  --leading-normal:  1.8;    /* 和文本文（pattern-X 準拠） */
  --leading-relaxed: 2.0;    /* 長文 prose */

  /* 字間 */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.06em;   /* UI ラベル */
  --tracking-wider:  0.14em;   /* eyebrow / 看板 */
  --tracking-widest: 0.28em;   /* HUD / orbitron tagline */


  /* ── 3. Spacing（4px グリッド・JP BtoB やや compact）─────── */
  --space-3xs:  0.25rem;   /*  4px */
  --space-2xs:  0.5rem;    /*  8px */
  --space-xs:   0.75rem;   /* 12px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2rem;      /* 32px */
  --space-xl:   3rem;      /* 48px */
  --space-2xl:  4.5rem;    /* 72px — セクション間 標準 */
  --space-3xl:  6rem;      /* 96px — セクション間 ゆとり */
  --space-4xl:  8rem;      /* 128px — 大セクション */


  /* ── 4. Radius ────────────────────────────────────────────
     pattern-X はやや角張った HUD 系。pill / sharp 0 は避ける。 */
  --radius-xs:   3px;    /* 看板/チップ */
  --radius-sm:   6px;    /* 入力欄・小カード */
  --radius-md:   9px;    /* ボタン・カード（標準） */
  --radius-lg:   14px;   /* 大カード/パネル */
  --radius-xl:   20px;   /* ヒーローパネル/帯 */
  --radius-pill: 999px;  /* チップ/タグ のみ */


  /* ── 5. Section width / Layout ────────────────────────────
     pattern-X の hero は clamp(680px,92vw,900px)。
     下層ページの読み幅は広めに取り、prose は別途 35em で締める。 */
  --wrap-max:        1200px;   /* .wrap 標準コンテナ */
  --wrap-narrow:     900px;    /* hero / 集中読みレーン */
  --wrap-wide:       1360px;   /* フルブリード手前の最大 */
  --wrap-prose:      38em;     /* 長文 1 行最適（和文 35–40字） */
  --gutter:          clamp(18px, 5vw, 72px);   /* 左右ガター */
  --section-pad-y:   clamp(64px, 9vh, 112px);  /* セクション縦余白 標準 */
  --section-pad-y-sm:clamp(40px, 6vh, 72px);   /* compact */


  /* ── 6. Navigation ────────────────────────────────────────
     pattern-X header: padding 16px、ロゴ 40px。実効高 ≈ 72–74px。 */
  --nav-height:      74px;
  --nav-pad-y:       16px;
  --nav-pad-x:       var(--gutter);
  --nav-bg:          linear-gradient(180deg, rgba(7,10,20,.86), rgba(7,10,20,.40));
  --nav-blur:        blur(10px) saturate(130%);
  --nav-border:      var(--hair);
  --z-header:        50;
  --z-stage:         0;
  --z-content:       10;
  --z-overlay:       60;   /* SP メニュー/チップ */


  /* ── 7. Form ──────────────────────────────────────────────
     夜の面に置く入力欄。focus はシアン発光リング。 */
  --field-bg:           rgba(16, 26, 48, .65);
  --field-border:       1px solid var(--hair-strong);
  --field-border-hover: 1px solid var(--hair-cyan);
  --field-radius:       var(--radius-sm);
  --field-pad-y:        13px;
  --field-pad-x:        16px;
  --field-text:         var(--ink);
  --field-placeholder:  var(--ink-faint);
  --field-focus-ring:   0 0 0 2px rgba(45, 226, 230, .55);
  --field-error:        var(--aka-hi);
  --field-error-ring:   0 0 0 2px rgba(255, 59, 83, .55);
  --label-color:        var(--ink-soft);
  --label-size:         var(--text-sm);


  /* ── 8. Button ────────────────────────────────────────────
     primary=朱→電光青のヒート / ghost=シアン罫の発光ボタン。 */
  --btn-radius:       var(--radius-md);
  --btn-pad-y:        15px;
  --btn-pad-x:        26px;
  --btn-font:         var(--font-body);
  --btn-weight:       700;
  --btn-size:         clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --btn-tracking:     0.02em;


  /* ── 9. Card ──────────────────────────────────────────────
     夜に沈む面 + ヘアライン + hover で発光が一段上がる。 */
  --card-bg:          linear-gradient(180deg, rgba(13,19,34,.72), rgba(8,12,26,.86));
  --card-border:      1px solid var(--hair);
  --card-border-lit:  1px solid var(--hair-cyan);
  --card-radius:      var(--radius-lg);
  --card-pad:         clamp(20px, 2.4vw, 32px);
  --card-shadow:      0 2px 18px rgba(5, 7, 15, .45);
  --card-shadow-hover:0 14px 40px rgba(5, 7, 15, .55), var(--glow-cyan);
  --card-lift:        -6px;   /* hover translateY 上限（-8px 超・rotate 禁止） */


  /* ── 10. Motion ───────────────────────────────────────────
     pattern-X: --ease / --breathe。+ duration / stagger を追加。 */
  --ease:            cubic-bezier(.22, .61, .36, 1);   /* 標準 ease（移植） */
  --ease-out:        cubic-bezier(.2, .8, .2, 1);      /* リビール decelerate */
  --ease-in-out:     cubic-bezier(.4, 0, .2, 1);
  --breathe:         cubic-bezier(.42, 0, .58, 1);     /* 呼吸アニメ（移植） */

  --duration-fast:   .22s;   /* hover/フォーカス */
  --duration-base:   .5s;    /* リビール標準 */
  --duration-slow:   .9s;    /* hero 入場 */
  --duration-ambient:9s;     /* 背景の星/呼吸 */

  --stagger:         80ms;   /* スタガー間隔（JP BtoB 0.08s） */
  --reveal-shift:    20px;   /* リビールの translateY 量（控えめ） */


  /* ── ブレイクポイント（CSS 直接参照不可・JS/メモ用）─────────
     mobile: 375px / tablet: 768px / desktop: 1200px+ */
}