/* ==========================================================
   variables.css — design tokens
   ========================================================== */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f7f8;
  --color-text: #111111;
  --color-text-sub: #5f6368;
  --color-border: #e7e7ea;
  --color-black: #050505;

  --color-sakura-light: #ffc7dc;
  --color-sakura: #f58ab4;
  --color-sakura-deep: #ef4f91;
  --color-sakura-tint: #fef2f7;

  --gradient-sakura: linear-gradient(
    135deg,
    #ffc7dc 0%,
    #f58ab4 52%,
    #ef4f91 100%
  );

  /* Typography */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 6.6vw, 6.25rem);
  --fs-section-title: clamp(2rem, 4.6vw, 4rem);
  --fs-display: clamp(2.25rem, 5.4vw, 4.75rem);
  --fs-section-lead: clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: 0.875rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-narrow: 840px;
  --section-space: clamp(6rem, 14vw, 11rem);
  --section-space-sm: clamp(3rem, 7vw, 5rem);
  --header-height: 76px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-card: 0 2px 8px rgba(5, 5, 5, 0.04);
  --shadow-card-hover: 0 10px 28px rgba(239, 79, 145, 0.1);
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-index */
  --z-canvas: -1;
  --z-content: 1;
  --z-header: 100;
  --z-nav-overlay: 200;
}

@media (max-width: 767px) {
  :root {
    --header-height: 60px;
  }
}