@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

/* ===============================
   DESIGN TOKENS
   =============================== */
:root {
  /* Palette */
  --color-bg: #16171A;
  --color-text: #F1F1F1;
  --color-text-invert: #221E1F;

  --color-primary: #16171A;        
  --color-primary-200: #00FFE5;  
  --color-white: #FFFFFF;
  --color-black: #221E1F;
  --color-gray-100: #F9F9F9;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #c0c0c0;
  --color-gray-600: #7e7e7e;
  --color-gray-800: #464646;

  /* Brand (logo) */
  --color-logo-main: #A37242;
  --color-logo-text: #CA9553;

  /* Typography */
  --font-sans: "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif TC", Georgia, serif;

  /* Base sizes */
  --font-size-base: 18px; /* ≈桌機基準 */
  --fs-h1: clamp(3rem, 5vw, 5rem);   /* 32–48px */
  --fs-h2: clamp(1.5rem, 3.2vw, 2.25rem); /* 24–36px */
  --fs-h3: clamp(1.125rem, 2vw, 1.5rem);  /* 18–24px */
  --fs-h4: clamp(1rem, 1.6vw, 1.25rem);   /* 16–20px */
  --fs-fig: 0.875rem; /* 14px */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}

/* ===============================
   BASE
   =============================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em; 
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 575.98px){
  body{ font-size: 1rem; } 
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover { color: inherit !important; }


/* Headings */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--color-white);
}
h1 {
  font: 800 var(--fs-h1) / 1 var(--font-serif);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 200;       
  letter-spacing: 1em;
  text-align: center;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 200; 
}
h4 {
  font-size: var(--fs-h4);
  font-weight: 400;
}

figcaption {
  font-size: var(--fs-fig);
  color: var(--color-gray-300);
}

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}
@media (max-width: 575.98px){
    h2{ letter-spacing: 0.5rem; }
}