/* ========================================
   Design Tokens — CSS Custom Properties
   Beautiful Connection カラースキーム
   ======================================== */

:root {
  /* ---- Colors ---- */
  --color-primary: #000000;          /* Black — メインカラー */
  --color-primary-dark: #000000;
  --color-primary-light: #EFEFF0;    /* ライトグレー */
  --color-primary-pale: #F8F8F8;     /* 超ライトグレー */
  --color-primary-rgb: 0, 0, 0;
  --color-secondary: #000000;
  --color-accent: #BC2636;           /* 赤 — アクセント/注意 */
  --color-accent-warm: #BC2636;
  --color-bg-dark: #000000;          /* フッター等 */
  --color-bg-white: #ffffff;
  --color-bg-cream: #ffffff;
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-light: #A5A5A5;
  --color-text-white: #ffffff;
  --color-border: #A5A5A5;
  --color-danger: #BC2636;
  --color-success: #43a047;

  /* ---- Typography ---- */
  --font-heading-jp: 'メイリオ', 'Meiryo', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', sans-serif;
  --font-heading-en: 'Raleway', sans-serif;
  --font-body: '小塚ゴシック Pr6N', 'メイリオ', 'Meiryo', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', sans-serif;

  /* ---- Font Sizes ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 2rem;
  --text-5xl: 3rem;

  /* ---- Border Radius ---- */
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 100px;

  /* ---- Shadows ---- */
  --shadow-card: none;
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.6s ease;

  /* ---- Spacing (Laravel版準拠) ---- */
  --spacing-tiny: 20px;
  --spacing-small: 40px;
  --spacing-block: 50px;
  --spacing-section: 85px;
  --spacing-equally: 50px;

  /* ---- Layout ---- */
  --site-max-width: 1140px;
  --header-height-desktop: 140px;
  --header-height-mobile: 87px;
}

@media (max-width: 767px) {
  :root {
    --spacing-tiny: 10px;
    --spacing-small: 15px;
    --spacing-block: 30px;
    --spacing-section: 50px;
    --spacing-equally: 12px;
  }
}