:root {
  /* Colors */
  --color-bg-base: #0B0F14;
  --color-bg-sub: #12181F;
  --color-accent-1: #00D4B8;
  --color-accent-2: #4A6CF7;
  --color-text-main: #F5F7FA;
  --color-text-sub: #A0AAB8;
  --color-accent-warn: #FF6B4A;

  /* Typography */
  --font-heading: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Layout */
  --container-max: 1200px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --header-height: 80px;

  /* Motion */
  --transition-base: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.3s ease;

  /* Generated visual assets (images/, produced via scripts/generate_images.py) */
  --img-hero-bg: url(../images/hero-bg.webp);
  --img-philosophy: url(../images/philosophy.webp);
  --img-service-app-development: url(../images/service-app-development.webp);
  --img-service-training: url(../images/service-training.webp);
  --img-service-security: url(../images/service-security.webp);
  --hero-overlay: linear-gradient(90deg, rgba(11,15,20,0.88) 0%, rgba(11,15,20,0.55) 55%, rgba(11,15,20,0.35) 100%);
}

/* Breakpoint reference (used inline as media queries, kept here for documentation):
   sm: max-width 480px / md: max-width 768px / lg: max-width 1024px / xl: 1025px+ */