/**
 * Base CSS
 * プロジェクト全体の基本スタイル
 */

/* ========================================
   CSS Variables
======================================== */
/* Variables are now defined in variables.css */

/* ========================================
   Base Elements
======================================== */
html {
  font-size: var(--wp--custom--font-size--root-px, 16px);
  font-size: var(--wp--custom--font-size--root-percent, 62.5%);
}

body {
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--system);
  font-weight: var(--wp--custom--font-weight--normal);
  line-height: var(--wp--custom--line-height--base);
  font-size: var(--wp--preset--font-size--base);
  letter-spacing: var(--wp--custom--letter-spacing--base);
}

/* ========================================
   Typography
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: var(--wp--custom--line-height--xs);
}

h1 {
  font-size: var(--wp--preset--font-size--4-xl);
}

h2 {
  font-size: var(--wp--preset--font-size--3-xl);
}

h3 {
  font-size: var(--wp--preset--font-size--2-xl);
}

h4 {
  font-size: var(--wp--preset--font-size--xl);
}

h5 {
  font-size: var(--wp--preset--font-size--lg);
}

h6 {
  font-size: var(--wp--preset--font-size--base);
}

p {
  margin-bottom: var(--wp--preset--spacing--base);
}

p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Container
======================================== */
.c-container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--sm);
}

.c-container--narrow {
  max-width: 768px;
}

.c-container--wide {
  max-width: 1440px;
}

@media (min-width: 768px) {
  .c-container {
    padding: 0 var(--wp--preset--spacing--sm);
  }
}

/* ========================================
   Common Components
======================================== */

/* Section Header */
.c-section-header {
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--3-xl);
}

.c-section-header__title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--font-weight--bold);
  margin-bottom: var(--wp--preset--spacing--base);
  color: var(--wp--preset--color--text);
  line-height: var(--wp--custom--line-height--xs);
}

.c-section-header__title small {
  display: inline;
  font-size: 90%;
  color: var(--wp--preset--color--light);
  margin: 0 0.1em;
}

.c-section-header__title-ja {
  position: relative;
  display: inline-block;
}

.c-section-header__title-ja::after {
  content: "";
  display: block;
  width: clamp(48px, 12vw, 72px);
  height: 3px;
  margin: var(--wp--preset--spacing--sm) auto 0;
  background-color: var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--border-radius--full);
}

.c-section-header__title-en {
  font-size: var(--wp--custom--font-size--section-header-en);
  font-weight: var(--wp--custom--font-weight--medium);
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  line-height: var(--wp--custom--line-height--sm);
}

.c-section-header__subtitle {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--gray);
}

@media (min-width: 768px) {
  .c-section-header__title {
    font-size: var(--wp--preset--font-size--4-xl);
  }

  .c-section-header__title small {
    font-size: 80%;
  }

  .c-section-header__title-en {
    font-size: var(--wp--custom--font-size--section-header-en-lg);
  }
}

/* Buttons */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--font-weight--medium);
  border-radius: var(--wp--custom--border-radius--lg);
  transition: all var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.c-btn:hover {
  transform: translateY(-2px);
}

.c-btn:active {
  transform: translateY(0);
}

/* Button Variants */
.c-btn--primary {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary);
}

.c-btn--primary:hover {
  background-color: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
}

.c-btn--secondary {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--secondary);
}

.c-btn--secondary:hover {
  background-color: var(--wp--preset--color--secondary-dark);
  border-color: var(--wp--preset--color--secondary-dark);
}

.c-btn--outline {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

.c-btn--outline:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

/* Button Sizes */
.c-btn--small {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
  font-size: var(--wp--preset--font-size--sm);
}

.c-btn--large {
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--2-xl);
  font-size: var(--wp--preset--font-size--lg);
}

.c-btn--block {
  width: 100%;
}

/* Form Elements */
.c-form-group {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.c-form-label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--text);
}

.c-form-input,
.c-form-textarea,
.c-form-select {
  width: 100%;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  border: 1px solid var(--wp--preset--color--gray-light);
  border-radius: var(--wp--custom--border-radius--md);
  background-color: var(--wp--preset--color--white);
  transition: border-color var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

.c-form-input:focus,
.c-form-textarea:focus,
.c-form-select:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  outline: 3px solid var(--wp--custom--overlay--primary--1);
}

/* Responsive Media Queries */
@media (min-width: 768px) {
  /* Variables are now defined in variables.css */
}

@media (min-width: 1024px) {
  /* Variables are now defined in variables.css */
}