/* ==========================================================================
   Univo ブランド・デザイントークンの実装（Web）

   値の正本は knowledge/reference/brand-tokens.md。ここは Web 用の実装（写し）。
   brand-tokens.md §7 が「Web のトークンの実装（写しはこの1つ）」として指している。
   ダーク面の派生トークン（§1-2）・--surface・--danger・--font-mono の和文の補い・動き（§8）は
   2026/09/28 に代表が決裁した（175号 §6 #2／179号 §9-4 #1＝E10）。値は LP5 の lp5.css の
   `:root` と同じ（LP5 は公開の回にこのファイルを読む形へ寄せる）。
   188号（2026/09/28）：正本と突き合わせ、値は1つも変えずに --surface・--danger・動きを足し、
   --on-brand-deep を正本どおり var(--surface) の別名にした（描画される色は #FFFFFF のまま）。

   ⚠ :root ではなく .univo-tokens の下に定義する。
     現行LP（index.html・fe/index.html）は Tailwind CDN の CSS 変数を :root に持っており、
     そこへ同名の変数を :root で足すと衝突する（どちらが勝つかがカスケードの順序に依存して
     不安定になる）。.univo-tokens を使う場所（本ページ・入口の部品の根）だけがこの値を読む。

   置き場：public/assets/univo-tokens.css（179号ブリーフ B。194号で public/lp から移した＝営業用LP の書き出し先と分けた）
   STATUS: DRAFT(代表確認前)
   ========================================================================== */

.univo-tokens {
  /* ---- 1. カラー（brand-tokens.md §1） ---- */
  --brand: #EA580C;
  --brand-deep: #C2410C;
  --logo-navy: #0B2D3A;
  --navy: #0A1128;
  --navy-soft: #121C38;
  --paper: #F8FAFC;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --surface: #FFFFFF;            /* ライト面の白（入力欄・カード・部品の地） */
  --danger: #B91C1C;             /* 入力の誤り（ライト面だけ）。必ず文言を併記する */
  --wash: color-mix(in srgb, var(--signal) 8%, var(--surface)); /* Web の白い面の章の地の淡い色（上限・224号）。--surface と混ぜて段 0／0.5／1 で使う。文字・線・操作部品に使わない・橙と混ぜない・8% より濃くしない */

  /* ---- 1-2. ダーク面の派生トークン（brand-tokens.md §1-2・2026/09/28 決裁） ---- */
  --ink-on-navy: var(--paper);   /* 見出し・強調・大きい数字（17.9:1） */
  --text-on-navy: #CBD5E1;       /* 本文（12.6:1） */
  --muted-on-navy: #94A3B8;      /* 補助文・注記・出典（7.3:1） */
  --line-on-navy: #334155;       /* 装飾の線だけ（1.8:1）＝操作部品の枠には使わない */
  --on-brand: var(--navy);       /* --brand 地の文字（5.3:1）。Web では使わない（2026/10/09・206号） */
  --on-brand-deep: var(--surface); /* --brand-deep 地の文字（5.2:1）＝白い面の申込ボタン・選択中の印・文字の選択の文字（常の状態・2026/10/09） */

  /* ---- 1・1-2 追補（2026/10/06 代表決定・D-4 再考・194号＝brand-tokens.md §1・§1-2）。ダーク面だけで使う ---- */
  --brand-bright: #FF8A3D;       /* ダーク面の行動と基準・光彩の色（対 --navy 7.97:1）。ライト面では使わない */
  --signal: #8FD3FF;             /* ダーク面の光・データ・予測（対 --navy 11.51:1）。行動（申込）には使わない */
  --on-brand-bright: var(--navy);  /* --brand-bright 地の文字（7.97:1） */
  --brand-bright-soft: color-mix(in srgb, var(--brand-bright) 16%, transparent); /* 淡い橙の面（予測の幅・選択中） */

  /* ---- 2. タイポグラフィ（brand-tokens.md §2） ---- */
  --font-serif-jp: 'Noto Serif JP', serif;
  --font-sans-jp: 'Noto Sans JP', sans-serif;
  --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans JP', monospace; /* 和文が混じる短い語のため Noto Sans JP を保険に */
  --font-logo: 'Segoe UI', system-ui, -apple-system, 'Segoe UI Variable Display', Arial, sans-serif; /* ロゴ専用。和文フォントを混ぜない */

  --lh-body: 2.0;
  --lh-head: 1.35;
  --ls-label: 0.16em;
  --ls-head: -0.01em;

  /* 文字の大きさの段階（brand-tokens.md §2-4・2026/10/09 代表決定 D26100907014697d6）。
     2026/10/09 に univo-site.css 1節から移した（--fs-heading・--fs-display は上限を下げた値）。
     15px 未満は --fs-index の1段だけ（§6 の例外 (a)(b)）。段の外の大きさを作らない */
  --fs-index: 0.8125rem;                                  /* 13px：欧文と数字だけの索引の記号・表と図の短い項目名だけ */
  --fs-note: 0.9375rem;                                   /* 15px：読ませる和文の下限（注記・ナビ・フッタ・ボタン・札） */
  --fs-body: 1rem;                                        /* 16px：本文 */
  --fs-lead: 1.125rem;                                    /* 18px：リード */
  --fs-title: 1.25rem;                                    /* 20px：カードの見出し・FAQ の問い・規程の条の見出し */
  --fs-heading-s: 1.5rem;                                 /* 24px：小見出し・ヘッダのロゴ */
  --fs-heading: clamp(2rem, 1.25rem + 1.75vw, 2.8125rem); /* 32〜45px：段の見出し・下層のページの h1 */
  --fs-display: clamp(2.5rem, 1.5rem + 3vw, 4rem);        /* 40〜64px：表紙で事業の約束を述べる見出し（トップ・営業用LP） */

  /* ---- 3. 余白・グリッド（brand-tokens.md §3） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 32px;
  --space-8: 56px;
  --space-12: 112px;
  --max-w: 1400px;
  --max-w-text: 1200px;
  --gutter: clamp(var(--space-4), 4vw, var(--space-8)); /* 画面の左右の余白（2026/10/06・§3） */

  /* ---- 4. 形・線（brand-tokens.md §4） ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-full: 9999px;
  --stroke: 1px;
  --stroke-accent: 2px;

  /* ---- 4-2. 光と焦点（2026/10/06 新設・brand-tokens.md §4-2）。ダーク面で使う・紙には出さない ---- */
  --glow-brand: 0 10px 40px -12px color-mix(in srgb, var(--brand-bright) 60%, transparent); /* 申込ボタンの光彩 */
  --glow-signal: 0 0 24px 6px color-mix(in srgb, var(--signal) 55%, transparent);          /* 図の中の光点・磁極 */
  --glow-sheen: inset 0 1px 0 color-mix(in srgb, var(--surface) 35%, transparent);         /* ボタンの上縁の艶 */
  --navy-glass: color-mix(in srgb, var(--navy) 72%, transparent);  /* すりガラスの面（上の文字は --text-on-navy 以上） */
  --blur-glass: 24px;            /* すりガラスのぼかし（大きい面） */
  --blur-glass-sm: 12px;         /* すりガラスのぼかし（小さい面） */

  /* ---- 8. 動き（brand-tokens.md §8・2026/09/28 決裁）。募集のページは動きを使わない（ブリーフ §7-4） ---- */
  --motion-duration: 0.9s;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reveal-distance: 20px;
  --motion-duration-ui: 0.3s;
  --motion-auto-limit: 5s;       /* 2026/10/06 改め：これを超えて自動で動くものがあるページには止める手段を置く（上限ではない） */
  --motion-scrub-length: 240vh;  /* 2026/10/06 改め：スクロールで画面を留める距離の目安（上限ではない） */
  --motion-hover-limit: 5s;      /* 2026/10/06 新設：触れたときの大きな応答が減衰して止まるまでの上限 */
  --motion-hover-shift: var(--space-1); /* 2026/10/09 新設（206号）：ホバーでボタンの矢印が右へ進む距離（tokens §8-2） */
}