:root {
  /* ── 鳳梨主題色彩 ── */
  --color-primary: #3A5F48;        /* 葉片綠 — header / nav / footer / heading */
  --color-primary-light: #4A7860;  /* 淺葉片綠 — nav 背景 */
  --color-accent: #E8A020;         /* 鳳梨黃 — active 邊框、CTA、hover 強調 */
  --color-accent-dark: #B87D10;    /* 深鳳梨黃 — hover 加深狀態 */
  --color-text: #3A1F08;           /* 深棕 — 主要文字（對比度 >12:1） */
  --color-text-muted: #7A5230;     /* 中棕 — 次要文字、說明文字 */
  --color-bg: #FFFCF0;             /* 奶油白 — 頁面背景 */
  --color-bg-light: #FEF3C7;       /* 淡鳳梨黃 — 卡片、提示區塊背景 */
  --color-border: #DFC88A;         /* 米黃 — 邊框 */

  /* ── 字型與排版 ── */
  --font-base: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.75;

  /* ── 間距 ── */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* ── 其他 ── */
  --border-radius: 0.5rem;
  --shadow-sm: 0 1px 3px rgba(58, 31, 8, 0.08);
  --shadow-md: 0 4px 16px rgba(58, 31, 8, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-base);
  cursor: url('../images/cursor-pineapple.svg') 16 16, url('../images/cursor-pineapple.png') 16 16, auto;
}

a, button, [role="button"], input, select, textarea, label[for] {
  cursor: url('../images/cursor-pineapple-pointer.svg') 12 12, url('../images/cursor-pineapple-pointer.png') 12 12, pointer;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-accent);
}

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

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: var(--spacing-xs);
}

p {
  margin-bottom: var(--spacing-md);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  line-height: 1.35;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}