:root {
  /* =========================
  Color
  ========================= */
  --color-primary: #0073bd;
  --color-secondary: #37bef0;
  --color-accent: #43b149;

  --color-primary-hover: #0073bd;
  --color-secondary-hover: #4fcffd;
  --color-accent-hover: #61ce66;

  --color-text: #333;
  --color-text-muted: #6a6c70;

  --color-bg: #fff;
  --color-bg-soft: #f8fafc;
  --color-border: #e5e7eb;

  /* =========================
  Space
  ========================= */
  --space-xs: 0.5rem;
  --space-sm: 0.8rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 10rem;

  /* =========================
  Typography
  ========================= */
  --font-base: 'Zen Kaku Gothic New', sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
  --font-heading: 'M PLUS 1p', sans-serif;

  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-base: 1.6rem;
  --font-size-md: 1.8rem;
  --font-size-lg: 2.4rem;
  --font-size-xl: 3.2rem;
  --font-size-2xl: 4.8rem;

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-base: 1.67;
  --line-height-heading: 1.3;
  --letter-spacing-base: 0.075em;

  /* =========================
  Layout
  ========================= */
  --container-width: 1440px;
  --container-width-narrow: 880px;
  --container-gutter: 5%;

  --section-padding-sm: var(--space-xl);
  --section-padding-md: var(--space-2xl);
  --section-padding-lg: var(--space-3xl);

  --header-height: 100px;
  --z-header: 100;

  /* =========================
  Radius / Shadow
  ========================= */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 50px;
  --radius-pill: 999px;

  --shadow-sm: 4px 4px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 7px 7px 5px rgba(0, 0, 0, 0.3);

  /* =========================
  Motion
  ========================= */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}