/* CSS Variables (Design Tokens) */
:root {
  /* Colors */
  --color-blue: #1b4da0;
  --color-text-dark: #2c3e50;
  --color-bg-gray: #f4f5f7;
  --color-border-light: #e0e6ed;
  --color-green: #2ea439;
  --color-white: #ffffff;
  --color-gray: #7f8c8d;
  --color-text-light: #555555;
  --color-text-lighter: #d0d0d0;

  /* Typography */
  --font-ja: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif Display", "Times New Roman", serif;

  /* Spacing */
  --section-spacing: 80px;
  --section-spacing-mobile: 40px;
  --container-padding: 40px;
  --container-padding-mobile: 20px;

  /* Border Radius */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-index */
  --z-header: 50;
  --z-mobile-cta: 40;
  --z-overlay: 30;
  --z-base: 1;
  --z-content: 10;
}