/* ==========================================================================
   Design Tokens
   Figma: Whitepace - SaaS Landing Page (Community)
   File key: vQXP7UVeU6Bp0E0Ddeptrs / Node: 9:101

   WordPress テーマ化時は、この :root をそのまま style.css に持ち込むか、
   ブロックテーマなら theme.json の settings.color.palette /
   settings.typography へ機械的に移植する。
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------
     Figma で変数化されているのは Primary/100 のみ。
     他は各ノードの生 fill から採取した実値。                              */
  --color-navy: #043873;        /* 濃紺。ヘッダー / ヒーロー等の背景        */
  --color-blue: #4f9cf9;        /* プライマリボタン                        */
  --color-yellow: #ffe492;      /* アクセント。Login ボタン / 装飾波線      */
  --color-primary-100: #c4defd; /* Figma 変数 Primary/100。画像プレースホルダ */
  --color-white: #ffffff;
  --color-text: #212529;        /* 白背景セクションの見出し・本文             */

  --color-text-on-dark: var(--color-white);
  --color-text-on-accent: var(--color-navy);

  /* ---- Typography -------------------------------------------------------
     見出し / 本文 / ボタンは Inter、グローバルナビのみ DM Sans。         */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-nav: "DM Sans", var(--font-base);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Figma の letterSpacing: -2 は px ではなく「-2%」。
     実ノードでも 64px→-1.28px / 18px→-0.36px となるため em で表現する。 */
  --tracking-tight: -0.02em;

  /* Header/H1 — Inter Bold 72
     H2 と同様、実ノードの行送りは Auto（normal）。 */
  --fs-h1: 72px;
  --lh-h1: normal;
  /* Header/H2 — Inter Bold 64
     Figma 変数の公称は lineHeight 100% だが、実ノードは Auto（normal）。
     実ノードの値を採用する。 */
  --fs-h2: 64px;
  --lh-h2: normal;
  /* Header/H4 — Inter Bold 36 */
  --fs-h4: 36px;
  --lh-h4: 1.2;
  /* Header/H5 — Inter Bold 28 / 36 */
  --fs-h5: 28px;
  --lh-h5: 36px;

  /* Paragraph/P1 — 24 */
  --fs-p1: 24px;
  --lh-p1: 32px;
  --lh-p1-semibold: 36px;
  /* Paragraph/P2 — 18 */
  --fs-p2: 18px;
  --lh-p2: 30px;   /* Regular */
  --lh-p2-medium: 23px;
  /* Paragraph/P3 — 16 */
  --fs-p3: 16px;
  --lh-p3: 20px;

  /* ---- Layout -----------------------------------------------------------
     1920px 幅で左右余白 220px → コンテンツ幅 1480px。                    */
  --container-width: 1480px;
  --container-gutter: 220px;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-15: 60px;
  --space-25: 100px;
  --space-35: 140px;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-btn: 8px;    /* ヘッダー / ヒーローのボタン */
  --radius-cta: 6px;    /* 本文セクションの Get Started 系ボタン */

  /* ---- Control ----------------------------------------------------------- */
  --btn-height: 60px;
}