/* Default: 白ベースにサイバーグラデーション */
:root {
  /* Listed tokens override design-system.css; omitted tokens inherit defaults. */
  --page: rgba(255, 255, 255, 1);
  --page-2: rgba(246, 251, 255, 1);
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: rgba(255, 255, 255, 1);
  --ink: rgba(20, 25, 50, 1);
  --muted: rgba(87, 102, 130, 1);
  --line: rgba(75, 188, 224, 0.24);
  --primary: rgb(84, 223, 209);
  --secondary: rgba(232, 84, 112, 1);
  --tertiary: rgba(217, 255, 84, 1);
  --primary-gradient: linear-gradient(135deg, rgba(57, 233, 138, 1) 0%, rgba(108, 145, 233, 1) 33%, rgba(177, 128, 219, 1) 66%, rgba(232, 84, 112, 1) 100%);
  --accent-ink: rgba(255, 255, 255, 1);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --font-body: 'IBM Plex Sans JP', sans-serif;
  --font-heading: 'IBM Plex Sans JP', sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --shadow: 0 24px 80px rgba(74, 116, 190, 0.16);
  --shadow-image: rgba(44, 84, 132, 0.18);
  --media-surface: rgba(245, 250, 255, 1);
  --media-pattern: rgba(75, 188, 224, 0.08);
  color-scheme: light;
}
body { background: var(--page); }

/* Cyber gradient treatment on the white default skin. */
.site-nav .nav-cta,
.sticky-cta a,
.diagnosis__progress span {
  background: var(--primary-gradient, var(--primary));
}

.hero h1 em,
.eyebrow,
.proof-item strong,
.product-group__heading h3,
.feature__number,
.media-card__body > p,
.diagnosis__result > strong,
.product-slide figcaption strong {
  background: var(--primary-gradient, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow--center {
  color: var(--primary);
  background: none;
}

.product-slide figcaption strong {
  text-shadow: none;
}

.product-slider__controls button.is-active {
  background: var(--primary);
}

.product-slide figcaption span {
  text-shadow: 0 1px 0 var(--page), 0 0 10px var(--page);
}