:root {
  /* Color primitives */
  --gv-color-navy-950: #010102;
  --gv-color-navy-900: #070910;
  --gv-color-navy-800: #0d1226;
  --gv-color-navy-700: #172051;
  --gv-color-white: #ffffff;
  --gv-color-paper: #f5f6f8;
  --gv-color-gold-500: #d5b200;
  --gv-color-gold-400: #e5cf52;
  --gv-color-mint-400: #4dffc3;

  /* Semantic colors */
  --gv-color-bg-dark: var(--gv-color-navy-900);
  --gv-color-bg-deep: var(--gv-color-navy-950);
  --gv-color-bg-light: var(--gv-color-paper);
  --gv-color-text-on-dark: #eef3f1;
  --gv-color-text-on-dark-muted: rgba(238, 243, 241, 0.68);
  --gv-color-text-chrome: #c3cbe5;
  --gv-color-text-on-light: var(--gv-color-navy-800);
  --gv-color-text-on-light-muted: #5e6478;
  --gv-color-border-on-dark: rgba(238, 243, 241, 0.14);
  --gv-color-border-on-light: rgba(23, 32, 81, 0.16);
  --gv-color-accent: var(--gv-color-gold-500);
  --gv-color-accent-soft: var(--gv-color-gold-400);

  /* Typography */
  --gv-body-weight: 500;
  --gv-tab-weight: 500;
  --gv-dropdown-weight: 500;
  /* 固定ページH1：共通UIへ移行時に使用。上田さんの .ph-en に準拠 */
  --gv-h1-size: clamp(52px, 7.5vw, 112px);
  --gv-h1-line-height: .9;
  --gv-h1-weight: 600;
  --gv-h1-letter-spacing: .01em;
  --gv-h1-subtitle-gap: 16px;
  --gv-font-family-display: "DM Sans", "Noto Sans JP", sans-serif;
  --gv-font-family-body: "Noto Sans JP", sans-serif;
  --gv-font-family-concept: "Outfit", "Zen Kaku Gothic New", sans-serif;
  --gv-font-size-label: 0.75rem;
  --gv-font-size-body-sm: 0.875rem;
  --gv-font-size-body: 1rem;
  --gv-font-size-body-lg: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  --gv-font-size-heading-sm: clamp(1.75rem, 1.32rem + 2.15vw, 3.25rem);
  --gv-font-size-heading-md: clamp(2.5rem, 1.75rem + 3.75vw, 5.5rem);
  --gv-font-size-heading-lg: clamp(3.25rem, 2rem + 6.25vw, 8.25rem);
  --gv-line-height-tight: 1.08;
  --gv-line-height-heading: 1.25;
  --gv-line-height-body: 1.9;
  --gv-letter-spacing-label: 0.22em;
  --gv-letter-spacing-heading: -0.02em;
  --gv-letter-spacing-body: 0.04em;

  /* Spacing: 4px base scale */
  --gv-space-1: 0.25rem;
  --gv-space-2: 0.5rem;
  --gv-space-3: 0.75rem;
  --gv-space-4: 1rem;
  --gv-space-5: 1.25rem;
  --gv-space-6: 1.5rem;
  --gv-space-8: 2rem;
  --gv-space-10: 2.5rem;
  --gv-space-12: 3rem;
  --gv-space-16: 4rem;
  --gv-space-20: 5rem;
  --gv-space-24: 6rem;
  --gv-space-32: 8rem;

  /* Layout */
  --gv-layout-gutter: clamp(1.25rem, 4vw, 4rem);
  --gv-layout-content: 75rem;
  --gv-layout-copy: 42rem;
  --gv-layout-header-height: 5rem;
  --gv-layout-header-height-mobile: 4rem;
  --gv-layout-category-hero-min-height: clamp(42.5rem, 84svh, 55rem);

  /* Shape and motion */
  --gv-radius-sm: 0.5rem;
  --gv-radius-md: 1rem;
  --gv-radius-pill: 999px;
  --gv-duration-fast: 180ms;
  --gv-duration-base: 320ms;
  --gv-duration-slow: 720ms;
  --gv-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --gv-ease-expressive: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 768px) {
  :root {
    --gv-layout-gutter: 1.25rem;
    --gv-layout-category-hero-min-height: 42.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gv-duration-fast: 1ms;
    --gv-duration-base: 1ms;
    --gv-duration-slow: 1ms;
  }
}
