/* =========================================================
   GOLIXX 共通デザイントークン
   正本: _運用/memory/香林UIデザイン.md §1（実値をそのまま採用）
   プロダクト側は --primary / --primary-d / --primary-l のみ差し替える。
   ★個別値のハードコード禁止。新しい生pxを作らずトークンを参照すること。
   ========================================================= */
:root{
  /* --- 主要色（プロダクトごとに差替可）--- */
  --primary:#1565c0; --primary-d:#0d47a1; --primary-l:#e3f0fc;

  /* --- 意味色（差し替えない）--- */
  --income:#1565c0;  --expense:#c62828; --expense-d:#8e1b1b;
  --ok:#2e7d32;      --ok-bg:#e8f5e9;   --ok-text:#1b5e20;
  --warn:#c62828;    --warn-bg:#fdecea;
  --amber:#ef6c00;   --amber-d:#e65100; --amber-bg:#fff3e0; --amber-text:#8a3200;
  --neutral:#455a64; --neutral-d:#263238;

  /* --- 面・線・文字 --- */
  --bg:#f4f6f9; --surface:#fff; --line:#dce1e9;
  --line-strong:#828b98;                 /* 非テキストコントラスト3:1（W1.4.11） */
  --text:#1f2733; --muted:#586472;
  --bd-primary:#c9def5; --bd-amber:#ecc9a0;
  --bg-subtle:#f0f3f7; --bg-hover:#eef3fa; --line-v:#e9edf3; --stripe:#f8fafc;

  /* --- 角丸 --- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px; --r-full:50%;

  /* --- フォントサイズ --- */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
  --fs-lg:15px; --fs-body:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:22px; --fs-hero:30px;
  /* ⚠一般向け（対外）は本文16px。内部ツールの高密度13-14pxとは別基準 */

  /* --- 余白（4pxグリッド）--- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:32px; --sp-7:48px;
  --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px;

  /* --- 影 --- */
  --shadow-sm:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 2px 10px rgba(0,0,0,.20);
  --shadow-lg:0 10px 40px rgba(0,0,0,.30);
  --shadow-xl:0 14px 54px rgba(0,0,0,.50);

  /* --- 寸法 --- */
  --control-h:32px; --control-h-touch:40px; --icon:16px; --icon-lg:24px;
  --maxw:960px;

  /* =======================================================
     以下 2026-07-26 追加（チェリーベリーデザイン UI診断_20260726）
     ★既存トークンの値は一切変更していない（4製品の現行表示を壊さないため）。
       追加のみ。追加値はすべて「4製品の既存CSSに実在する生px/生hex」を
       そのまま採ったので、置き換えても見た目は変わらない。
     ======================================================= */

  /* --- 表示用の大きい文字（既存 --fs-3xl:22px の上） ---
     出どころ: pay-total .amount=26px / plan-price=28px / code-input=32px
              buzz=40px / code-big=44px（quiz.css・kaigi.css・site.css 実測） */
  --fs-4xl:26px; --fs-5xl:28px; --fs-6xl:32px; --fs-7xl:40px; --fs-8xl:44px;

  /* --- レイアウト幅（4製品で同じ値が生pxで散らばっていた） --- */
  --maxw-narrow:640px;    /* .wrap.narrow（4製品同値） */
  --maxw-article:760px;   /* .article（3製品同値） */
  --maxw-legal:820px;     /* .legal / .meeting-shell */
  --maxw-card:520px;      /* .join-card / .create-card / .result-dlg（4製品同値） */
  --maxw-dlg:560px;       /* .qr-dlg */

  /* --- ヒーロー（製品ごとに差し替える3スロット）---
     既定は quiz/kaigi/kono の現行値。akaire は
     --hero-2:#123147; --hero-3:#0a1e2b; --hero-ink:#e2eef2; を上書きする。 */
  --hero-2:#0a2b57; --hero-3:#071d3c; --hero-ink:#dce7f5;

  /* --- 製品アクセント（primary と別色相が要る部品用）---
     既定は無効（primary と同一）。quiz は早押しボタンで
     --accent:#c2185b; --accent-d:#8c0f42; --accent-l:#fce4ec; を上書きする。 */
  --accent:var(--primary); --accent-d:var(--primary-d); --accent-l:var(--primary-l);

  /* --- タップ領域（正本§7）--- */
  --tap-min:34px;   /* アイコン類の下限 */
  --tap:40px;       /* 通常ボタン */
  --tap-lg:44px;    /* 主操作・タブ・summary */

  /* --- 線幅 --- */
  --bw:1px; --bw-2:2px; --bw-3:3px; --bw-focus:3px;

  /* --- モーション（正本§5 のレシピを値に固定）--- */
  --dur-fast:.12s; --dur:.2s; --dur-in:.32s; --dur-out:.24s;
  --ease-in:cubic-bezier(.2,.7,.3,1); --ease-out:ease-in;
  --transition:all var(--dur-fast) ease;   /* review.css がローカル定義していたものを昇格 */

  /* --- 重なり順（★これが無かったため 1〜2050 の15段階が製品ごとに乱立していた）---
     必ずこのトークンを使い、生の z-index を書かない。 */
  --z-base:0;
  --z-sticky:20;     /* appbar / play-bar / 表のsticky見出し */
  --z-fab:30;        /* 画面右下の浮きボタン */
  --z-drawer:40;     /* サイドドロワー・ボトムシート */
  --z-backdrop:45;   /* ドロワーの幕 */
  --z-dropdown:50;   /* 候補・メニュー */
  --z-toast:60;      /* トースト／スナックバー */
  --z-modal:80;      /* dialog */
  --z-lightbox:90;   /* 画像拡大 */
  --z-loadbar:95;    /* 画面上端の読み込みバー（最前面） */
  --z-skiplink:100;  /* スキップリンク（フォーカス時に最前面） */

  /* --- 部品寸法 --- */
  --fab-offset:24px;     /* .fab の画面端からの距離（kono 実測値） */
  --fab-h:52px;
  --toolbar-h:44px;
  --thumb-w:120px;       /* サムネイル列 */
  --sidebar-w:280px;     /* コメント列・サイドドロワー */
  --loadbar-h:3px;       /* 正本§5 画面上端の読み込みバー */
  --sp-half:2px;         /* 4pxグリッドの半目（ピルの上下パディング等の微調整のみ） */
  --bw-4:4px;            /* 意味色の左アクセント罫（.lcard.done / .article h2） */
  --dot-sm:18px;         /* 件数バッジ */
  --dot:22px;            /* 履歴アイコン */
  --check:20px;          /* ラジオ・チェックボックスの実寸 */
  --pill-h:20px;         /* タブ内の件数ピル（行高を増やさない小ピル） */
  --progress-h:14px;
  --code-h:60px;         /* 参加コード入力欄 */
  --embed-h:56px;        /* 外部埋め込み枠（Square カード入力）の最低高 */
  --kv-label:120px;      /* 定義リストのラベル列 */
  --tip-maxw:280px;      /* ツールチップの最大幅（正本§4） */
  /* グリッドの折返し基準（auto-fit minmax の最小列幅）。
     これ未満になったら1列に落ちる＝横スクロールを出さないための要 */
  --col-min:240px; --col-min-sm:200px;
}
/* ⚠ブレークポイントは CSS 変数を @media に書けないため、
   数値を直接書く。4製品で統一する値は 640px / 768px / 860px の3つだけ。
   （現状 kono=640, akaire=768, 正本=640/820/860 と割れているため揃えること） */