/* ===================================================================
   GW TOPデザイン — デザイントークン
   -------------------------------------------------------------------
   出典: もずくさんの Figma Make モック（src/index.css と src/App.tsx）
   取得済みソース: 博士の公式/figma-make-src/index.css

   ⚠️ index.css のトークンと App.tsx の直書き定数が一部食い違っていた。
      実際に画面へ描画されるのは App.tsx 側なので、モックの見た目に忠実な方を採用している。
        - 博士エリアの濃色: index.css #8b2252 / App.tsx #8b1a50 → App.tsx を採用
        - #b8326f（primary-dark）は index.css に存在せず App.tsx のみ

   ⚠️ ここは変数の定義だけ。単体では見た目を一切変えない。
      値を使うのは各セクションのCSS側。
   =================================================================== */

:root {
  /* --- ブランドカラー ------------------------------------------- */
  --gwt-primary:            #de4592; /* CTA・アクセント */
  --gwt-primary-dark:       #b8326f; /* 濃いピンク（App.tsx P_DARK） */
  --gwt-primary-light:      #fce8f3; /* 淡ピンクの面（ボタン・メニュー背景） */
  --gwt-primary-light-hover:#f9c8e4; /* 淡ピンク面のhover */
  --gwt-primary-pale:       #f7c5dc; /* さらに淡いピンク（index.css --color-primary-light） */
  --gwt-doctor-bg:          #8b1a50; /* 博士セクションの濃いワインレッド */

  --gwt-accent-green:       #2d5a4a;
  --gwt-accent-green-light: #3d7a62;

  /* --- 面と文字 ------------------------------------------------- */
  --gwt-bg:          #fafaf9; /* ページ地色。純白ではない */
  --gwt-surface:     #ffffff; /* カードなどの面 */
  --gwt-surface-alt: #f5f5f5; /* 専門家エリアなどの灰背景 */
  --gwt-text:        #2d2d2d;
  --gwt-text-muted:  #555555;
  --gwt-text-weak:   #888888;
  --gwt-line:        #e5e5e5;

  /* --- 余白 ----------------------------------------------------- */
  --gwt-space-1:  4px;
  --gwt-space-2:  8px;
  --gwt-space-3:  12px;
  --gwt-space-4:  16px;
  --gwt-space-5:  20px;
  --gwt-space-6:  24px;
  --gwt-space-8:  32px;
  --gwt-space-10: 40px;
  --gwt-space-12: 48px;
  --gwt-space-16: 64px;

  /* --- 角丸 ----------------------------------------------------- */
  --gwt-radius-sm:   8px;
  --gwt-radius-md:   12px;
  --gwt-radius-lg:   16px;
  --gwt-radius-pill: 999px;

  /* --- 影 ------------------------------------------------------- */
  --gwt-shadow-card-hover: 4px 8px 20px rgba(0, 0, 0, 0.10);

  /* --- タイポグラフィ ------------------------------------------- */
  --gwt-font-sans: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Noto Sans JP", sans-serif;
  --gwt-font-weight-base: 500;
  --gwt-font-weight-bold: 700;

  /* --- モーション ----------------------------------------------- */
  --gwt-transition: 0.15s ease;
}