/* ───────────────────────────────────────────────────────────
   士林承恩堂 · SLCC Design Tokens
   colors_and_type.css
   ─────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: "Noto Sans TC";
  src: url("fonts/NotoSansTC-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/NotoSansTC-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Primary — 恩典陽光橘 Grace-Sun Orange */
  --orange:       #E87A5D;
  --orange-deep:  #C95F45;
  --orange-soft:  #F2A98F;
  --orange-tint:  rgba(232,122,93,0.08);

  /* Secondary — 天堂寧靜藍 Heavenly Calm Blue */
  --blue:         #4A7C9D;
  --blue-deep:    #355F7A;
  --blue-soft:    #8CAEC4;
  --blue-tint:    rgba(74,124,157,0.08);

  /* Bases — 米白 / 沙灘 */
  --base-light:   #FAFAF6;   /* 主背景 */
  --base-dark:    #F3ECE3;   /* 次背景 */

  /* Ink — 深炭灰 / 石瓦藍灰 */
  --ink:          #2C3539;   /* 主文字 */
  --ink-soft:     #5C6770;
  --ink-mute:     #8A9299;
  --footer:       #3E4A56;   /* 頁尾深底 */

  --hair:         rgba(44,53,57,0.10);
  --hair-strong:  rgba(44,53,57,0.18);

  /* Type families */
  --font-sans:  "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-serif: "Noto Serif TC", "Cormorant Garamond", "Songti TC", serif;
  --font-mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Semantic type scale */
  --fs-display:  clamp(36px, 4.4vw, 60px);
  --fs-h1:       clamp(30px, 3.2vw, 44px);
  --fs-h2:       clamp(26px, 2.6vw, 36px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-kicker:   12px;   /* uppercase eyebrow */

  --lh-tight:    1.25;
  --lh-snug:     1.4;
  --lh-body:     1.65;
  --lh-loose:    1.85;

  --tracking-zh: 0.04em;
  --tracking-en: 0.02em;
  --tracking-kicker: 0.28em;

  /* Radii / shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(44,53,57,0.04), 0 8px 24px rgba(44,53,57,0.06);
  --shadow-lift: 0 2px 4px rgba(44,53,57,0.05), 0 18px 42px rgba(44,53,57,0.10);
}

/* ── Semantic helpers ───────────────────────────────────── */
.fg1 { color: var(--ink); }
.fg2 { color: var(--ink-soft); }
.fg-mute { color: var(--ink-mute); }
.fg-accent { color: var(--orange); }
.fg-secondary { color: var(--blue); }

.serif-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-zh);
  color: var(--ink);
}
.h1 { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-zh); }
.h2 { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-zh); }
.h3 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
.h4 { font-family: var(--font-sans);  font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
.p  { font-family: var(--font-sans);  font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-loose); color: var(--ink); }
.small { font-size: var(--fs-sm); color: var(--ink-soft); }
.kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}