/* ============================================================
 * variables.css — ブランドカラー・タイポ・スペーシングの集中管理
 * ブランド基調: bizdata（鮮やかな青 + 深い紺）
 * グラデーションは使用しない。落ち着いた配色のみ。
 * ============================================================ */

:root {
  /* ---- Brand colors ---- */
  --color-brand-primary: #0090FF;   /* ロゴの明るい青（アクセント） */
  --color-brand-deep:    #0B1F4B;   /* 深い紺（ヒーロー・強調ブロック） */
  --color-brand-deep-2:  #102A5E;   /* 深い紺のやや明るいバリエーション */

  /* ---- Neutrals ---- */
  --color-text-primary:   #0B1F4B;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #8A94A6;
  --color-text-on-dark:   #FFFFFF;

  --color-bg:        #FFFFFF;
  --color-bg-alt:    #F6F8FB;   /* セクション区切り用の薄グレー */
  --color-border:    #E2E8F0;

  /* ---- Typography ---- */
  --font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-sans-jp), var(--font-sans-en);

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-hero: 56px;

  --lh-tight: 1.25;
  --lh-base:  1.7;
  --lh-heading: 1.35;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1160px;
  --container-pad: 24px;

  /* ---- Misc ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 75, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 31, 75, 0.08);

  --transition-base: 0.2s ease;
}