/* ==========================================================================
   variables.css — デザイントークン（CSS 変数）
   ==========================================================================
   責務:
   - カラー、タイポグラフィ、レイアウト値、影・角丸、z-index などのトークン定義
   - 他の CSS ファイル（global / components / shell / top）から参照される唯一の変数定義
   ========================================================================== */

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

:root {
  /* フォントファミリー（日本語本文・英字見出し・英字アクセント）
     Windows: Meiryo / Yu Gothic（日本語）, Segoe UI / Tahoma（英字）をフォールバックに含む */
  --font-sans: "Noto Sans JP", "Meiryo", "Yu Gothic", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "MS PGothic",
    sans-serif;
  --font-heading: "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Tahoma, Arial, sans-serif;
  --font-roboto: "Roboto", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Tahoma, Arial, sans-serif;

  --color-main: #003153;
  --color-main-light: #ebf3f8;
  /* Figma: SeibFitnessClub/Color/Main(Light) */
  --color-accent-green: #8dbe60;
  /* 法人プランPOINTバッジ等 */
  --color-white: #ffffff;
  --color-black: #000000;
  /* グレースケール（数値が大きいほど濃い） */
  --color-gray-100: #f8f8f8;
  --color-gray-200: #ebebeb;
  --color-gray-300: #d9d9d9;
  --color-gray-400: #e4edf5;
  --color-gray-500: #8d8d8d;
  --color-gray-600: #707070;
  --color-gray-700: #444444;
  --color-gray-800: #2b2b2b;
  --color-gray-900: #262626;
  --color-gray-950: #222222;
  --color-gray: var(--color-gray-500);

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

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

  /* 角丸・シャドウ */
  --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;
}