:root {
  /* ===== Brand colors (AI受付さん base) ===== */
  --color-primary: #e8347b;
  --color-primary-dark: #b71c5c;
  --color-primary-light: #ffd7e5;
  --color-primary-soft: #fff5f8;
  --color-accent-orange: #f5a623;
  --color-accent-green: #7cb342;

  /* ===== Surface ===== */
  --color-bg: #ffffff;
  --color-bg-soft: #fafafa;
  --color-bg-tinted: #fff5f8;
  --color-bg-dark: #1a1a1a;

  /* ===== Text ===== */
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;
  --color-text-link: #e8347b;

  /* ===== Border / divider ===== */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* ===== Semantic ===== */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;

  /* ===== Gradients ===== */
  --gradient-hero: linear-gradient(135deg, #ffd7e5 0%, #e8347b 60%, #b71c5c 100%);
  --gradient-cta: linear-gradient(135deg, #f5a623 0%, #e8347b 100%);
  --gradient-soft: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);

  /* ===== Typography ===== */
  --font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-family-display: var(--font-family-base);
  --font-family-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Fluid type scale (clamp: min, preferred, max) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-2xl: clamp(1.75rem, 1.4rem + 2vw, 2.5rem);
  --font-size-3xl: clamp(2rem, 1.6rem + 2.5vw, 3rem);
  --font-size-4xl: clamp(2.5rem, 2rem + 3vw, 3.75rem);

  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;

  /* ===== Spacing (8px grid) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-padding: var(--space-4);
  --section-padding-y: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ===== Shadow ===== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(232, 52, 123, 0.1);
  --shadow-lg: 0 12px 32px rgba(232, 52, 123, 0.18);
  --shadow-cta: 0 8px 24px rgba(232, 52, 123, 0.32);

  /* ===== Transition ===== */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-index ===== */
  --z-header: 100;
  --z-modal: 200;
  --z-tooltip: 300;

  /* ===== Breakpoints (used in JS, mirror media queries) ===== */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;
}