/* ==========================================================================
   variables.css — デザイントークン（CSS 変数 / corporate 用）
   ==========================================================================
   責務:
   - corporate サイト向けのカラー、タイポグラフィ、レイアウト値、影・角丸、z-index などのトークン定義
   - 他の CSS ファイル（base / components / pages）から参照される変数定義
   - 値は Figma の corporate デザイン（BORECA CORPORATE_TOP）に合わせる
   ========================================================================== */

/* レイヤー順: base < wysiwyg < unlayered（components, pages） */
@layer base, wysiwyg;

:root {
  /* フォントファミリー（Figma corporate / 現在選択中 Group に合わせる）
     - 本文・ラベル系: Zen Kaku Gothic New
     - 日本語見出し: Zen Old Mincho
     - 英字アクセント: Wix Madefor Text */
  --font-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Meiryo", "Yu Gothic",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "MS PGothic", sans-serif;
  --font-heading-jp: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN",
    "MS PMincho", serif;
  --font-accent-en: "Wix Madefor Text", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;

  /* BORECA カラーパレット（Figma corporate に合わせた値） */
  --color-main: #006e5f;
  /* Main Green */
  --color-seibu-main: #003153;
  /* SEIBU Fitness Club Main (Navy) */
  --color-deep-green: #013228;
  /* Deep Green */
  --color-main-light: #edebe9;
  /* Pale Gray (Figma: BORECA/Color/Mono/Pala Gray) */
  --color-white: #ffffff;
  --color-black: #000000;

  /* グレースケール（数値が大きいほど濃い）
     Figma: Mono Gray / Mono Dark Gray などに対応 */
  --color-gray-100: #f8f8f8;
  --color-gray-200: #edece9;
  --color-gray-300: #d9d7d2;
  --color-gray-400: #c3c0b8;
  --color-gray-500: #7b7a77;
  /* Mono Gray */
  --color-gray-600: #666562;
  --color-gray-700: #555451;
  --color-gray-800: #454443;
  /* Mono Dark Gray */
  --color-gray-900: #343330;
  --color-gray-950: #262522;
  --color-gray: var(--color-gray-500);

  /* レイアウト関連トークン */
  --content-max-width: 1440px;
  --content-max-width-sm: 840px;

  /* ヘッダーの高さ */
  --header-height: 72px;

  /* 角丸・シャドウ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Z-index scale（オーバーレイ系のみ変数化） */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-offcanvas-backdrop: 1040;
  --z-index-offcanvas: 1045;
  --z-index-modal-backdrop: 1050;
  --z-index-modal: 1055;
  --z-index-popover: 1070;
  --z-index-tooltip: 1080;
  --z-index-toast: 1090;
  --z-index-opening-overlay: 1100;
}