/* ------------------------
    Colors & Variables
--------------------------*/
:root {
  /* Colors */
  --bg-page: linear-gradient(135deg,
      #fff5e6 0%,
      #e8f5e9 100%);
  /* Nńg-nńg ê chiām-chân-sek */
  --bg-article: #fbfbf4;
  --text-main: #333;
  --text-muted: #777;
  --accent-green: #7cbb00;
  /* Tâi-oân Chheⁿ */

  /* Height */
  --header-height: 88px;

  /* Width */
  --page-max: 1200px;
  --article-narrow: 720px;
  --article-wide: 960px;

  /* Typography */

  --font-ui: "TauhuOo", "SourceSans3", "Inter", "Noto Sans TC", sans-serif;
  --font-scale: 1;

  /* Others */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --shadow-soft: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --card-bg: #ffffff;
  --border-blue: #add8e6;
  --text-dark: #1f2937;
  --text-light: #888888;
}

/* ================================================= */
/* --- RWD Media Queries (Desktop First) --- */
/* ================================================= */

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }
}