/* ======================================================================
   Design Tokens
   ====================================================================== */
:root {
  --sp-font-sans: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-display: "Outfit", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --sp-shell-width-desktop: min(1400px, calc(100vw - 6rem));
  --sp-shell-width-tablet: min(1400px, calc(100vw - 3rem));
  --sp-shell-width-mobile: min(1400px, calc(100vw - 2rem));
  --sp-section-gap-desktop: 20rem;
  --sp-section-gap-tablet: 14rem;
  --sp-section-gap-mobile: 10rem;
  --sp-space-page: clamp(2rem, 3.2vw, 3.75rem);
  --sp-space-page-compact: 1rem;
  --sp-space-page-hero: clamp(0.8rem, 1.55vw, 1.25rem);
  --sp-space-header: 1rem;
  --sp-radius-sm: 0.55rem;
  --sp-radius-pill: 999px;
  --sp-rule-hairline: 1px;
  --sp-type-caption-2xs: 0.66rem;
  --sp-type-caption-xs: 0.68rem;
  --sp-type-caption-sm: 0.72rem;
  --sp-type-caption-md: 0.74rem;
  --sp-type-label-xs: 0.75rem;
  --sp-type-label-sm: 0.76rem;
  --sp-type-label: 0.78rem;
  --sp-type-label-lg: 0.79rem;
  --sp-type-label-xl: 0.8rem;
  --sp-type-label-note: 0.81rem;
  --sp-type-label-strong: 0.82rem;
  --sp-type-label-em: 0.83rem;
  --sp-type-meta: 0.84rem;
  --sp-type-control: 0.86rem;
  --sp-type-body-sm: 0.88rem;
  --sp-type-body-sm-plus: 0.9rem;
  --sp-type-body-md: 0.92rem;
  --sp-type-body-base: 0.93rem;
  --sp-type-body-reading-sm: 0.9375rem;
  --sp-type-body-reading: 0.94rem;
  --sp-type-body: 0.95rem;
  --sp-type-body-plus: 0.96rem;
  --sp-type-body-em: 0.965rem;
  --sp-type-body-strong: 0.97rem;
  --sp-type-body-xl: 0.98rem;
  --sp-type-body-2xl: 0.99rem;
  --sp-type-body-lg: 1rem;
  --sp-type-title-card-sm: 1.12rem;
  --sp-type-panel-title: clamp(1.35rem, 0.55vw + 1.2rem, 1.75rem);
  --sp-type-display-demo: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
  --sp-type-hero-title: clamp(2.5rem, 3vw + 1.35rem, 5.6rem);
  --sp-type-hero-title-mobile: clamp(2.1rem, 7.4vw, 3.4rem);
  --sp-type-hero-lead: clamp(0.95rem, 0.45vw + 0.9rem, 1.18rem);
  --sp-type-card-title: clamp(1.15rem, 0.75vw + 0.95rem, 1.8rem);
  --sp-type-card-title-md: clamp(0.98rem, 0.25vw + 0.92rem, 1.12rem);
  --sp-type-card-title-mobile: clamp(0.95rem, 1vw + 0.72rem, 1.15rem);
  --sp-type-section-title-mobile: clamp(1.9rem, 1.25rem + 3.4vw, 2.75rem);
  --sp-type-section-title-compact: clamp(1.7rem, 1.1rem + 2.6vw, 2.35rem);
  --sp-type-subsection-title: clamp(1.65rem, 1.15rem + 2.8vw, 2.25rem);
  --sp-type-page-title: clamp(1.65rem, 1vw + 1.25rem, 2.5rem);
  --sp-type-lead-title: clamp(1.45rem, 1.1rem + 1vw, 2.15rem);
  --sp-type-price-display: clamp(2.2rem, 1.55rem + 1vw, 3.25rem);
  --sp-type-price-display-sm: clamp(1.7rem, 1.2rem + 0.7vw, 2.35rem);
  --sp-type-plan-title: clamp(1.35rem, 1rem + 1.5vw, 1.8rem);
  --sp-type-band-title: clamp(1.25rem, 0.7rem + 1vw, 1.8rem);
  --sp-type-section-title: clamp(2.35rem, 2vw + 1.7rem, 3.7rem);
  --sp-type-detail-lg: clamp(2rem, 1.15vw + 1.55rem, 3.1rem);
  --sp-type-detail-md: clamp(1.95rem, 1.05vw + 1.55rem, 2.85rem);
  --sp-type-detail-sm: clamp(1.85rem, 1vw + 1.35rem, 2.85rem);
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --sp-theme-bg-base: #F8F8F8;
  --sp-theme-section-bg: #EEF3EE;
  --sp-theme-surface: #FFFFFF;
  --sp-theme-surface-soft: #F6F8F6;
  --sp-theme-primary: #5C6F5E;
  --sp-theme-primary-hover: #4C5C4E;
  --sp-theme-secondary: #6C836F;
  --sp-theme-accent-deep: #92D88F;
  --sp-theme-accent-warm: #D88A5B;
  --sp-theme-accent-cool: #5E93C9;
  --sp-theme-text-heading: #1A1A1A;
  --sp-theme-text-body: #333333;
  --sp-theme-text-muted: #5F6A60;
  --sp-theme-text-subtle: #6C836F;
  --sp-theme-border: #BDC7BE;
  --sp-theme-border-strong: #6C836F;
  --sp-theme-button-text: #FFFFFF;
  --sp-theme-on-media: #FFFFFF;
  --sp-theme-media-ink: #1A1A1A;
  --sp-theme-card-fallback: #BDC7BE;
  --sp-pattern-hero: #E7EFE8;
  --sp-pattern-section-1: #F8F8F8;
  --sp-pattern-section-2: #F1F5F1;
  --sp-pattern-section-3: #EEF3EE;
  --sp-pattern-section-4: #F6F8F6;
  --sp-pattern-section-5: #EEF3EE;
  --sp-pattern-footer: #E3ECE4;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --sp-theme-bg-base: #181A18;
  --sp-theme-section-bg: #222622;
  --sp-theme-surface: #2B302B;
  --sp-theme-surface-soft: #1B1F1B;
  --sp-theme-primary: #92D88F;
  --sp-theme-primary-hover: #7FC97C;
  --sp-theme-secondary: #6C836F;
  --sp-theme-accent-deep: #92D88F;
  --sp-theme-accent-warm: #F0A16B;
  --sp-theme-accent-cool: #7AADE3;
  --sp-theme-text-heading: #F8F8F8;
  --sp-theme-text-body: #E8ECE8;
  --sp-theme-text-muted: #BDC7BE;
  --sp-theme-text-subtle: #6C836F;
  --sp-theme-border: #465247;
  --sp-theme-border-strong: #6C836F;
  --sp-theme-button-text: #1A1A1A;
  --sp-theme-on-media: #F8F8F8;
  --sp-theme-media-ink: #141614;
  --sp-theme-card-fallback: #465247;
  --sp-pattern-hero: #20241F;
  --sp-pattern-section-1: #181A18;
  --sp-pattern-section-2: #1D211D;
  --sp-pattern-section-3: #222622;
  --sp-pattern-section-4: #1B1F1B;
  --sp-pattern-section-5: #222622;
  --sp-pattern-footer: #141614;
}

:root {
  --sp-shadow-outline: 0 0 0 1px color-mix(in srgb, var(--sp-theme-text-body) 8%, transparent);
  --sp-shadow-soft: 0 16px 40px color-mix(in srgb, var(--sp-theme-text-heading) 10%, transparent);
  --sp-shadow-card: 0 10px 24px color-mix(in srgb, var(--sp-theme-text-heading) 8%, transparent);
  --sp-surface-glass: color-mix(in srgb, var(--sp-theme-surface) 74%, transparent);
  --sp-surface-glass-strong: color-mix(in srgb, var(--sp-theme-surface) 90%, transparent);
  --sp-surface-muted: color-mix(in srgb, var(--sp-theme-surface-soft) 82%, var(--sp-theme-surface) 18%);
  --sp-layer-base-90: color-mix(in srgb, var(--sp-theme-bg-base) 90%, transparent);
  --sp-layer-base-92: color-mix(in srgb, var(--sp-theme-bg-base) 92%, transparent);
  --sp-layer-base-98: color-mix(in srgb, var(--sp-theme-bg-base) 98%, transparent);
  --sp-layer-surface-08: color-mix(in srgb, var(--sp-theme-surface) 8%, transparent);
  --sp-layer-surface-09: color-mix(in srgb, var(--sp-theme-surface) 9%, transparent);
  --sp-layer-surface-12: color-mix(in srgb, var(--sp-theme-surface) 12%, transparent);
  --sp-layer-surface-14: color-mix(in srgb, var(--sp-theme-surface) 14%, transparent);
  --sp-layer-surface-16: color-mix(in srgb, var(--sp-theme-surface) 16%, transparent);
  --sp-layer-surface-18: color-mix(in srgb, var(--sp-theme-surface) 18%, transparent);
  --sp-layer-surface-22: color-mix(in srgb, var(--sp-theme-surface) 22%, transparent);
  --sp-layer-surface-24: color-mix(in srgb, var(--sp-theme-surface) 24%, transparent);
  --sp-layer-surface-26: color-mix(in srgb, var(--sp-theme-surface) 26%, transparent);
  --sp-layer-surface-34: color-mix(in srgb, var(--sp-theme-surface) 34%, transparent);
  --sp-layer-surface-36: color-mix(in srgb, var(--sp-theme-surface) 36%, transparent);
  --sp-layer-surface-42: color-mix(in srgb, var(--sp-theme-surface) 42%, transparent);
  --sp-layer-surface-45: color-mix(in srgb, var(--sp-theme-surface) 45%, transparent);
  --sp-layer-surface-46: color-mix(in srgb, var(--sp-theme-surface) 46%, transparent);
  --sp-layer-surface-50: color-mix(in srgb, var(--sp-theme-surface) 50%, transparent);
  --sp-layer-surface-52: color-mix(in srgb, var(--sp-theme-surface) 52%, transparent);
  --sp-layer-surface-56: color-mix(in srgb, var(--sp-theme-surface) 56%, transparent);
  --sp-layer-surface-66: color-mix(in srgb, var(--sp-theme-surface) 66%, transparent);
  --sp-layer-surface-68: color-mix(in srgb, var(--sp-theme-surface) 68%, transparent);
  --sp-layer-surface-82: color-mix(in srgb, var(--sp-theme-surface) 82%, transparent);
  --sp-layer-surface-88: color-mix(in srgb, var(--sp-theme-surface) 88%, transparent);
  --sp-layer-text-03: color-mix(in srgb, var(--sp-theme-text-heading) 3%, transparent);
  --sp-layer-text-04: color-mix(in srgb, var(--sp-theme-text-heading) 4%, transparent);
  --sp-layer-text-05: color-mix(in srgb, var(--sp-theme-text-heading) 5%, transparent);
  --sp-layer-text-06: color-mix(in srgb, var(--sp-theme-text-heading) 6%, transparent);
  --sp-layer-text-08: color-mix(in srgb, var(--sp-theme-text-heading) 8%, transparent);
  --sp-layer-text-12: color-mix(in srgb, var(--sp-theme-text-heading) 12%, transparent);
  --sp-layer-text-28: color-mix(in srgb, var(--sp-theme-text-heading) 28%, transparent);
  --sp-layer-media-02: color-mix(in srgb, var(--sp-theme-media-ink) 2%, transparent);
  --sp-layer-media-04: color-mix(in srgb, var(--sp-theme-media-ink) 4%, transparent);
  --sp-layer-media-06: color-mix(in srgb, var(--sp-theme-media-ink) 6%, transparent);
  --sp-layer-media-08: color-mix(in srgb, var(--sp-theme-media-ink) 8%, transparent);
  --sp-layer-media-18: color-mix(in srgb, var(--sp-theme-media-ink) 18%, transparent);
  --sp-layer-media-25: color-mix(in srgb, var(--sp-theme-media-ink) 25%, transparent);
  --sp-layer-media-26: color-mix(in srgb, var(--sp-theme-media-ink) 26%, transparent);
  --sp-layer-media-28: color-mix(in srgb, var(--sp-theme-media-ink) 28%, transparent);
  --sp-layer-media-45: color-mix(in srgb, var(--sp-theme-media-ink) 45%, transparent);
  --sp-layer-media-50: color-mix(in srgb, var(--sp-theme-media-ink) 50%, transparent);
  --sp-layer-media-70: color-mix(in srgb, var(--sp-theme-media-ink) 70%, transparent);
  --sp-layer-media-72: color-mix(in srgb, var(--sp-theme-media-ink) 72%, transparent);
  --sp-layer-on-media-18: color-mix(in srgb, var(--sp-theme-on-media) 18%, transparent);
  --sp-layer-on-media-24: color-mix(in srgb, var(--sp-theme-on-media) 24%, transparent);
  --sp-layer-on-media-42: color-mix(in srgb, var(--sp-theme-on-media) 42%, transparent);
  --sp-layer-on-media-82: color-mix(in srgb, var(--sp-theme-on-media) 82%, transparent);
  --sp-layer-on-media-85: color-mix(in srgb, var(--sp-theme-on-media) 85%, transparent);
  --sp-layer-on-media-88: color-mix(in srgb, var(--sp-theme-on-media) 88%, transparent);
  --sp-layer-on-media-90: color-mix(in srgb, var(--sp-theme-on-media) 90%, transparent);
  --sp-layer-on-media-92: color-mix(in srgb, var(--sp-theme-on-media) 92%, transparent);
  --sp-layer-on-media-95: color-mix(in srgb, var(--sp-theme-on-media) 95%, transparent);
  --sp-layer-primary-08: color-mix(in srgb, var(--sp-theme-primary) 8%, transparent);
  --sp-layer-primary-16: color-mix(in srgb, var(--sp-theme-primary) 16%, transparent);
  --sp-layer-primary-18: color-mix(in srgb, var(--sp-theme-primary) 18%, transparent);
  --sp-layer-primary-42: color-mix(in srgb, var(--sp-theme-primary) 42%, transparent);
  --sp-layer-primary-55: color-mix(in srgb, var(--sp-theme-primary) 55%, transparent);
  --sp-scrollbar-thumb: color-mix(in srgb, var(--sp-theme-border-strong) 72%, var(--sp-theme-border) 28%);
  --sp-focus-ring: color-mix(in srgb, var(--sp-theme-primary) 42%, transparent);
  --bg: var(--sp-theme-bg-base);
  --surface: var(--sp-theme-surface);
  --surface-2: var(--sp-theme-surface-soft);
  --line: var(--sp-theme-border);
  --line-strong: var(--sp-theme-border-strong);
  --text: var(--sp-theme-text-heading);
  --muted: var(--sp-theme-text-muted);
  --muted-2: var(--sp-theme-text-subtle);
  --active: var(--sp-theme-primary);
  --accent: var(--sp-theme-accent-cool);
  --shadow: var(--sp-shadow-outline);
  --shell-width: var(--sp-shell-width-desktop);
  --page-gap: var(--sp-space-page);
  --header-gap: var(--sp-space-header);
  --title-size: var(--sp-type-section-title);
  --sans: var(--sp-font-sans);
  --radius: var(--sp-radius-sm);
  --menu-width: clamp(22rem, 28vw, 30rem);
  --tap: 3rem;
  --edge-gap: 0rem;
  --hero-title: var(--sp-type-hero-title);
  --hero-lead: var(--sp-type-hero-lead);
  --hero-kicker: var(--sp-type-label);
  --card-title: var(--sp-type-card-title);
  --dot-size: 0.52rem;
  --button-size: clamp(2.65rem, 3.2vw, 3.15rem);
}