/* ============================================================
   shared.css — design tokens, reset, base, layout wrapper
   Link this from every page on the site.
   ============================================================ */

:root {
  --font-sans: "Noto Sans TC", sans-serif;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #888;
  --color-text-muted: #6b6660;
  --color-text-faint: #a09890;
  --color-background-primary: #fff;
  --color-background-secondary: #f7f7f5;
  --color-border-tertiary: #e5e5e5;
  --color-border-warm: #d8d2ca;
  --color-border-warm-md: #c8c0b8;
  --color-border-primary: #aaa;
  --border-radius-lg: 10px;
  --color-accent: #c9b47a;
  --color-header-gold: #b8a897;

  /* ── Header height ── used by the #site-header spacer on every page */
  --header-height: 85px;

  /* ── Font scale ── change this to scale all text (1 = 100%, 1.1 = 110%) */
  --font-scale: 1.25;
  --m-font-scale: 1;

  /* ── Layout ── change these two to resize the whole site */
  --content-max-width: 1400px;
  --content-vw: 90vw;
  --content-width: min(var(--content-max-width), var(--content-vw));
  --content-pad: 1.5rem;
  --nav-align: max(var(--content-pad),
      calc((100vw - var(--content-width)) / 2 + var(--content-pad)));
}

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

html {
  touch-action: manipulation;
  overflow-x: clip;
  font-size: calc(16px * var(--font-scale));
}

a[href^="tel:"],
a[href^="tel:"]:visited {
  color: inherit;
}

@media (max-width: 768px) {
  :root { --header-height: 75px; }
  html { font-size: calc(8px * var(--m-font-scale)); }
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  overflow-x: clip;
  padding: 0;
  margin: 0;
}

/* ── PAGE CONTENT wrapper (replaces body padding/max-width) ── */
.page-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}