/* =========================================================
   ZEETA Design Tokens
   デザイン画像 04-design-tokens.png に準拠
   ========================================================= */

:root {
  /* -------- Colors -------- */
  /* Brand */
  --color-navy-900: #0B1320;        /* メインベース（ヒーロー背景など） */
  --color-navy-800: #111B2E;
  --color-navy-700: #1A2540;
  --color-blue-500: #2563EB;        /* 営業代行アクセント / プライマリCTA */
  --color-blue-600: #1D4ED8;
  --color-blue-400: #3B82F6;
  --color-teal-500: #10B981;        /* バックオフィスアクセント（Emerald） */
  --color-teal-600: #059669;
  --color-teal-400: #34D399;
  --color-lime-500: #84CC16;        /* バックオフィス差し色（Lime） */
  --color-lime-600: #65A30D;
  --color-lime-400: #A3E635;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-bg: #F5F7FA;              /* セクション背景（ライトグレー） */
  --color-bg-alt: #EEF2F7;
  --color-border: #E4E9F0;
  --color-border-strong: #CBD5E1;
  --color-text: #0F172A;            /* 本文 */
  --color-text-muted: #475569;      /* 補足テキスト */
  --color-text-subtle: #64748B;
  --color-text-on-dark: #E2E8F0;
  --color-text-on-dark-muted: #94A3B8;

  /* Semantic */
  --color-check: #10B981;           /* チェックアイコン（Emerald） */

  /* -------- Typography -------- */
  --font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                  "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Inter", "Noto Sans JP", sans-serif;

  /* Font sizes */
  --fs-display: clamp(2.25rem, 4.4vw, 3.5rem);   /* h1 */
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);          /* 36px */
  --fs-h3: 1.25rem;                                /* 20px */
  --fs-h4: 1.0625rem;                              /* 17px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-body-sm: 0.9375rem;                         /* 15px */
  --fs-small: 0.8125rem;                           /* 13px */
  --fs-xs: 0.75rem;                                /* 12px */

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-base: 1.85;                  /* 本文の標準行間（指定値） */

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-base: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.2em;          /* セクションラベル用 */

  /* -------- Spacing scale -------- */
  --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: 120px;

  /* -------- Radius -------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -------- Layout -------- */
  --container-max: 1280px;
  --container-pad-pc: 40px;
  --container-pad-sp: 20px;
  --section-pad-pc: 112px;
  --section-pad-sp: 56px;
  --header-h: 72px;

  /* -------- Shadow -------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-blue: 0 12px 28px rgba(37, 99, 235, 0.28);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* レスポンシブで section padding を切り替え */
@media (max-width: 768px) {
  :root {
    --section-pad-pc: var(--section-pad-sp);
  }
}