:root {
  /* Color */
  --color-bg: #0d0d0d;
  --color-surface: #1a1a1a;
  --color-border: #2a2a2a;
  --color-text: #f0f0f0;
  --color-text-sub: #888888;
  --color-accent: #f0f0f0;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --size-hero: clamp(3rem, 10vw, 9rem);
  --size-h2: clamp(2rem, 5vw, 4rem);
  --size-h3: 1.25rem;
  --size-body: 1rem;
  --size-small: 0.875rem;

  /* Spacing */
  --space-section: clamp(80px, 15vw, 160px);
  --space-gap: 2rem;

  /* Transition */
  --transition: 0.3s ease;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
  --header-h: 64px;

  /* Z-index */
  --z-nav: 100;
  --z-toast: 200;
  --z-menu: 150;
}

/* Breakpoints (for reference):
   SP:  ~767px
   TAB: 768px ~ 1023px
   PC:  1024px ~
*/