/* ==========================================================================
   FormosaBible Website Design Tokens
   Source: mockup/website_redesign_45_DESIGN_SYSTEM.md (Issue #45)
   ========================================================================== */

:root {
  /* --- Shared App Brand Tokens --- */
  --brand-antique-gold: #C5A028;

  /* --- Website Semantic Palette --- */
  --color-bg-paper: #F9F5EC;
  --color-bg-surface: #FFFFFF;
  --color-text-primary: #1A1812;
  --color-text-wood: #4A3520;
  --color-text-secondary: #5D5655;
  --web-accent-bronze: #966E22;
  --color-contour: #B8933A;
  --color-border-rule: #DDD7CB;
  --color-border-subtle: rgba(221, 215, 203, 0.6);
  --color-cta-bg: #1A1812;
  --color-cta-hover: #4A3520;
  --color-cta-text: #F9F5EC;
  --color-focus: #1D4ED8;
  --color-seal-red: #A33A2B;

  /* --- Legacy Compatibility Aliases (Preserves current homepage visuals until #48) --- */
  --bg-parchment: var(--color-bg-paper);
  --bg-card: var(--color-bg-surface);
  --gold-primary: var(--brand-antique-gold);
  --gold-hover: #B08A20;
  --gold-light: #FBF4E6;
  --text-dark: var(--color-text-primary);
  --text-sub: var(--color-text-secondary);
  --text-muted: #8E857F;
  --border-color: var(--color-border-rule);
  --shadow-subtle: 0 4px 16px rgba(44, 36, 32, 0.06);
  --shadow-hover: 0 8px 24px rgba(44, 36, 32, 0.1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* --- Typography Font Families --- */
  --font-serif-tc: 'Noto Serif TC', 'Songti TC', serif;
  --font-serif-poj: 'Noto Serif', serif;
  --font-serif-en: 'Cormorant Garamond', 'Newsreader', serif;
  --font-coordinates: 'Newsreader', 'Noto Serif', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", sans-serif;

  /* --- Desktop Typography Scale --- */
  --fs-h1: 68px;
  --fs-h2: 44px;
  --fs-scripture: 44px;
  --fs-poj: 30px;
  --fs-tagline: 24px;
  --fs-body: 21px;
  --fs-cta: 19px;
  --fs-ui: 17px;
  --fs-caption: 14px;

  /* --- Line Heights --- */
  --lh-h1: 1.25;
  --lh-h2: 1.35;
  --lh-scripture: 1.6;
  --lh-poj: 1.5;
  --lh-body: 1.8;
  --lh-ui: 1.4;

  /* --- Spacing & Container Scale --- */
  --container-max-width: 1280px;
  --section-spacing: 110px;
}

/* Mobile Responsive Scale (<= 768px Viewport) */
@media (max-width: 768px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 32px;
    --fs-scripture: 32px;
    --fs-poj: 21px;
    --fs-tagline: 18px;
    --fs-body: 18px;
    --fs-cta: 18px;
    --fs-ui: 16px;
    --fs-caption: 14px;
    --section-spacing: 72px;
  }
}