/* =============================================
   CSS Variables
   ============================================= */
:root {
  /* Primary Colors - Blue */
  --color-blue-dark: #1e4c6d;
  --color-blue-medium: #2d6a8e;
  --color-blue-light: #4a90b8;

  /* Accent Colors */
  --color-accent-yellow: #ffd700;
  --color-accent-orange: #f77f00;

  /* Background Colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #fef6ed;
  --color-bg-light-alt: #d0e8f0;
  --color-bg-gray: #ededed;

  /* Text Colors */
  --color-text-primary: #2a2a2a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  /* Border Colors */
  --color-border-light: #b1b7be;
  --color-border-medium: #cbd5e1;

  /* Font */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Sora", sans-serif;
  --font-number: "Bebas Neue", sans-serif;
}

/* =============================================
   Reset & Base
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}