:root {
  --primary-color: #60a5fa; /* Light Blue - for main calls to action and highlights */
  --primary-color-dark: #3b82f6; /* Darker Blue - for hover states of primary color elements */
  --secondary-color: #818cf8; /* Indigo - complementary color for secondary elements */
  --accent-color: #a78bfa; /* Violet - for subtle highlights or specific elements */
  --text-color: #f3f4f6; /* Light Gray - primary color for body text */
  --text-muted-color: #9ca3af; /* Medium Gray - for less prominent text */
  --bg-primary-color: #030712; /* Very Dark Blue/Almost Black - main background */
  --bg-secondary-color: #111827; /* Dark Gray/Blue - background for cards/sections */
  --bg-nav-scrolled-color: rgba(
    17,
    24,
    39,
    0.9
  ); /* Dark Gray with transparency for scrolled nav */
  --primary-color-rgb: 96, 165, 250; /* RGB values for --primary-color */
}

body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  background-color: var(
    --bg-primary-color
  ); /* Consistent with HTML's bg-gray-950 */
  color: var(--text-color);
  overflow-x: hidden;
}
.section-title {
  font-size: 2.5rem; /* 40px */
  font-weight: 700;
  margin-bottom: 2rem; /* 32px */
  text-align: center;
  color: var(--primary-color); /* Light Blue */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.choreographer-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.choreographer-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(var(--primary-color-rgb), 0.3),
    0 10px 10px -5px rgba(var(--primary-color-rgb), 0.2);
}
/* Scroll animation section */
.fade-in-section {
  opacity: 1 !important;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Navigation bar background */
nav {
  transition: background-color 0.3s ease;
}
nav.scrolled {
  background-color: var(--bg-nav-scrolled-color); /* Dark gray (scrolled) */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.nav-link {
  transition: color 0.3s ease;
}
.nav-link:hover {
  color: var(--primary-color); /* Light Blue */
}

/* Utility classes to apply theme colors */
.bg-custom-secondary {
  background-color: var(--bg-secondary-color);
}

.text-custom-primary {
  color: var(--primary-color);
}

.text-custom-secondary {
  color: var(--secondary-color);
}

.border-custom-secondary {
  border-color: var(--secondary-color);
}

.datetime-indent {
  display: inline-block;
  text-indent: 3.3em; /* 一行上と列をそろえるための調整 */
}
