:root {
  /* ===== Colors ===== */
  --color-primary: #00457C;
  --color-primary-dark: #142d57;
  --color-primary-mid: #2a5494;
  --color-accent: #4A81C7;
  --color-accent-light: #6fa1e0;
  --color-line: #2d6cc7;

  --color-bg: #ffffff;
  --color-bg-soft: #f5f8fc;
  --color-bg-gradient-from: #e8eff8;
  --color-bg-gradient-to: #c4d8f0;

  --color-text: #1a1a1a;
  --color-text-soft: #4a4a4a;
  --color-text-muted: #7a8aa0;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.78);

  --color-decoration: #d8e3f1;

  /* ===== Typography ===== */
  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-jp-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en-serif: "Cormorant Garamond", "Times New Roman", serif;

  --fs-xs: 0.75rem;       /* 12px */
  --fs-sm: 0.875rem;      /* 14px */
  --fs-base: 1rem;        /* 16px */
  --fs-md: 1.125rem;      /* 18px */
  --fs-lg: 1.5rem;        /* 24px */
  --fs-xl: 2rem;          /* 32px */
  --fs-2xl: 2.5rem;       /* 40px */
  --fs-3xl: 3.5rem;       /* 56px */
  --fs-4xl: 5rem;         /* 80px - decorative en heading */

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ===== Layout ===== */
  --container-pc: 1240px;
  --container-pad-pc: 100px;
  --container-pad-tablet: 48px;
  --container-pad-sp: 24px;

  --header-h-pc: 90px;
  --header-h-sp: 64px;

  --section-pad-y-pc: 120px;
  --section-pad-y-sp: 64px;

  /* ===== Radius & misc ===== */
  --radius-pill: 999px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-soft: 0 4px 24px rgba(27, 58, 110, 0.08);
  --shadow-card: 0 8px 32px rgba(27, 58, 110, 0.12);

  --transition: 0.3s ease;
}