/* =========================
   全站變數
========================== */
:root {
  --color-green-950: #052f28;
  --color-green-900: #073c32;
  --color-green-800: #0a4b3d;
  --color-green-700: #12634f;

  --color-yellow: #ffc928;
  --color-yellow-light: #ffda57;
  --color-orange: #ef7d21;

  --color-cream: #f7f4ec;
  --color-white: #ffffff;

  --color-gray-50: #f8f8f6;
  --color-gray-100: #eeeeea;
  --color-gray-200: #dddcd6;
  --color-gray-500: #6f716d;
  --color-gray-700: #3a3d39;
  --color-gray-900: #171a18;

  --shadow-small:
    0 8px 24px rgba(6, 47, 40, 0.08);

  --shadow-medium:
    0 18px 45px rgba(6, 47, 40, 0.12);

  --border-radius-small: 8px;
  --border-radius-medium: 16px;
  --border-radius-large: 24px;

  --page-width: 1280px;

  --transition-fast: 180ms ease;
  --transition-normal: 280ms ease;
}

/* =========================
   Reset
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  font-family:
    Inter,
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;
  color: var(--color-gray-900);
  line-height: 1.6;
  background: var(--color-cream);
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================
   共用容器
========================== */
.page-container {
  width: min(
    var(--page-width),
    calc(100% - 48px)
  );
  margin: 0 auto;
}

/* =========================
   共用按鈕
========================== */
.button {
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: var(--border-radius-small);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-weight: 800;
  letter-spacing: 0.02em;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

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

.button-primary {
  color: var(--color-green-950);
  background: linear-gradient(
    135deg,
    var(--color-yellow-light),
    var(--color-yellow)
  );

  box-shadow:
    0 10px 24px rgba(255, 201, 40, 0.2);
}

.button-primary:hover {
  background: var(--color-yellow-light);
  box-shadow:
    0 14px 30px rgba(255, 201, 40, 0.3);
}

.button-outline {
  color: var(--color-white);
  border-color: var(--color-yellow);
  background: rgba(4, 37, 31, 0.65);
}

.button-outline:hover {
  color: var(--color-green-950);
  background: var(--color-yellow);
}

.button-large {
  min-height: 58px;
  padding: 0 30px;
  font-size: 1rem;
}

.button-icon {
  font-size: 1.1em;
}

/* =========================
   圖片佔位區塊
========================== */
.large-image-placeholder,
.placeholder-thumbnail,
.coach-avatar,
.product-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-gray-500);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;

  background:
    linear-gradient(
      135deg,
      #edeae1,
      #d9d6cd
    );
}