:root {
  /* Brand Colors - Mode Design Guideline準拠 */
  --color-offwhite: #FAF9F7;
  --color-coral: #E07A5F;
  --color-charcoal: #0E0E0E;
  --color-line: rgba(224, 122, 95, 0.3);

  /* Background gradient */
  --gradient-bg: linear-gradient(180deg, #FAF9F7 0%, #F4F1EE 100%);

  /* Design tokens - Mode系準拠（装飾最小限） */
  --radius-md: 0px;  /* 角丸禁止 */
  --radius-lg: 0px;  /* 角丸禁止 */

  /* Animation variables - 控えめな動き */
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-slow: 1800ms;  /* より緩やか */
  --duration-medium: 1000ms;
  --duration-fast: 500ms;

  /* Wave & Smoke colors - より淡く控えめに */
  --wave-color-primary: rgba(224, 122, 95, 0.12);
  --wave-color-secondary: rgba(224, 122, 95, 0.06);
  --smoke-color: rgba(224, 122, 95, 0.04);
}

body {
  background: var(--color-offwhite);
  letter-spacing: 0.01em;
  font-family: 'Shippori Mincho', serif;
}

/* Global animation styles */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);  /* より控えめに */
  }
}

@keyframes rippleExpand {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}