/* BHCAC Design System — Colors & Type
 * Source: tailwind.config.js + index.css from smartinchow/bhcac
 * Brand: Baulkham Hills Chinese Alliance Church (基督教華人宣道會迦南堂)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+TC:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@400;600;700&display=swap');

:root {
  /* ── BRAND CORE ─────────────────────────────── */
  --brand-navy: #0f172a;     /* primary dark — text, navbar, hero overlay */
  --brand-teal: #0d9488;     /* accent — secondary CTAs, icons, links */
  --brand-coral: #f43f5e;    /* primary accent — CTAs, highlights, hover */
  --brand-light: #f8fafc;    /* off-white background */
  --brand-warm: #fff7ed;     /* warm cream — alt section background */

  /* Logo red (sampled from alliancechurchlogo-red.jpg) */
  --brand-logo-red: #c0382c;

  /* ── EXTENDED TINTS (derived for UI work) ──── */
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --navy-500: #64748b;
  --navy-300: #cbd5e1;
  --navy-100: #e2e8f0;

  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-100: #ccfbf1;

  --coral-700: #be123c;
  --coral-600: #e11d48;
  --coral-500: #f43f5e;
  --coral-400: #fb7185;
  --coral-100: #ffe4e6;

  /* ── SEMANTIC FOREGROUND/BACKGROUND ────────── */
  --fg-1: var(--brand-navy);          /* primary text */
  --fg-2: #475569;                    /* secondary text */
  --fg-3: #64748b;                    /* muted text */
  --fg-on-dark: #ffffff;
  --fg-on-dark-2: rgba(255,255,255,0.85);
  --fg-on-dark-3: rgba(255,255,255,0.6);

  --bg-1: #ffffff;                    /* surface */
  --bg-2: var(--brand-light);         /* subtle section */
  --bg-3: var(--brand-warm);          /* warm/highlight section */
  --bg-dark: var(--brand-navy);       /* dark hero / footer */

  --accent-primary: var(--brand-coral);
  --accent-secondary: var(--brand-teal);

  --border-subtle: #e2e8f0;           /* slate-200 */
  --border-strong: #cbd5e1;           /* slate-300 */

  /* ── TYPE FAMILIES ─────────────────────────── */
  --font-sans: 'Inter', 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Merriweather', 'Noto Serif TC', Georgia, serif;
  --font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-zh-serif: 'Noto Serif TC', 'PingFang TC', serif;

  /* ── TYPE SCALE ────────────────────────────── */
  --fs-display: 4.5rem;     /* 72 — hero on desktop */
  --fs-h1: 3rem;            /* 48 */
  --fs-h2: 2rem;            /* 32 */
  --fs-h3: 1.5rem;          /* 24 */
  --fs-h4: 1.25rem;         /* 20 */
  --fs-lg: 1.125rem;        /* 18 — lead paragraph */
  --fs-base: 1rem;          /* 16 */
  --fs-sm: 0.875rem;        /* 14 */
  --fs-xs: 0.75rem;         /* 12 — eyebrow, role tag */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;       /* uppercase eyebrows */

  /* ── SPACING (4px base) ────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── RADII ─────────────────────────────────── */
  --radius-sm: 0.375rem;     /* small chips */
  --radius-md: 0.5rem;       /* inputs, buttons-square */
  --radius-lg: 0.75rem;      /* cards small */
  --radius-xl: 1rem;         /* cards (rounded-xl) */
  --radius-2xl: 1.5rem;      /* hero info chips */
  --radius-3xl: 2rem;        /* feature blocks */
  --radius-full: 9999px;     /* pills, CTAs */

  /* ── SHADOWS ───────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.10), 0 2px 4px -2px rgba(15,23,42,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.10), 0 4px 6px -4px rgba(15,23,42,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.12), 0 8px 10px -6px rgba(15,23,42,0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(15,23,42,0.25);

  /* ── MOTION ────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
}

/* ── BASE ELEMENTS ──────────────────────────────── */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-1); -webkit-font-smoothing: antialiased; }

::selection { background: var(--brand-coral); color: #fff; }

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
p { color: var(--fg-2); line-height: var(--lh-base); }

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--brand-coral);
}

.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--fg-2);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}

a { color: var(--brand-teal); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-coral); }

/* ── ZH (Chinese) overrides — slightly tighter, dedicated stack ─── */
:lang(zh), .lang-zh { font-family: var(--font-zh); letter-spacing: 0; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; }