:root {
  --primary-blue: #0184ff;
  --primary-blue-light: #33a1ff;
  --primary-blue-dark: #0066cc;
  --accent-yellow: #fad75a;
  --accent-yellow-light: #fbe485;
  --accent-yellow-dark: #f8ca2b;
  --accent-yellow-darker: #d4a614;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --background-primary: #f7f4ee;
  --background-secondary: #f0ece4;
  --background-tertiary: #e8e4db;
  --surface: #f8f9fa;
  --surface-elevated: #f1f3f4;
  --border-color: #e0e0e0;
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-blue: 0 4px 16px rgba(1, 132, 255, 0.2);
  --shadow-yellow: 0 4px 16px rgba(250, 215, 90, 0.3);
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xl: 20px;
  --font-sans: 'Noto Sans TC', 'Noto Sans', 'Microsoft JhengHei', 'PingFang TC', Arial, sans-serif;
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-foundation-opacity: 0.025;
  --texture-section-opacity: 0.04;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background-color: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: var(--texture-noise);
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--texture-foundation-opacity);
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

.texture-grain { position: relative; }
.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--texture-noise);
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--texture-section-opacity);
  border-radius: inherit;
  z-index: 1;
}

/* ScrollReveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}