/* =============================================================================
   ADEPR Church — Design Tokens (Sacred Clarity Design System)
   Source of truth for colors, spacing, typography. Ported from Tailwind config.
   ============================================================================= */

:root {
  /* ---------- Color: Primary / Secondary ---------- */
  --color-primary: #00327d;
  --color-primary-container: #0047ab;
  --color-primary-fixed: #dae2ff;
  --color-primary-fixed-dim: #b1c5ff;
  --color-on-primary: #ffffff;
  --color-on-primary-fixed: #001946;
  --color-on-primary-fixed-variant: #00419e;
  --color-on-primary-container: #a5bdff;

  --color-secondary: #705d00;
  --color-secondary-container: #fcd400;
  --color-secondary-fixed: #ffe16d;
  --color-secondary-fixed-dim: #e9c400;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #6e5c00;
  --color-on-secondary-fixed: #221b00;
  --color-on-secondary-fixed-variant: #544600;

  --color-tertiary: #363636;
  --color-tertiary-container: #4d4d4d;
  --color-tertiary-fixed: #e2e2e2;
  --color-tertiary-fixed-dim: #c6c6c6;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #bebebe;
  --color-on-tertiary-fixed: #1b1b1b;
  --color-on-tertiary-fixed-variant: #474747;

  /* ---------- Color: Surface / Background ---------- */
  --color-background: #f9f9f9;
  --color-on-background: #1a1c1c;
  --color-surface: #f9f9f9;
  --color-on-surface: #1a1c1c;
  --color-surface-bright: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-variant: #e2e2e2;
  --color-on-surface-variant: #434653;
  --color-surface-tint: #2559bd;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f4;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-inverse-surface: #2f3131;
  --color-inverse-on-surface: #f0f1f1;
  --color-inverse-primary: #b1c5ff;

  /* ---------- Color: Status / Outline ---------- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-outline: #737784;
  --color-outline-variant: #c3c6d5;

  /* ---------- Spacing (matches Tailwind keys) ---------- */
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-gutter: 24px;
  --space-margin: 32px;
  --space-lg: 48px;
  --space-xl: 80px;

  /* ---------- Radius ---------- */
  --radius-default: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* ---------- Typography: families ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Typography: sizes ---------- */
  --fs-h1: 48px;
  --lh-h1: 1.2;
  --fw-h1: 600;
  --ls-h1: -0.02em;

  --fs-h2: 36px;
  --lh-h2: 1.25;
  --fw-h2: 600;

  --fs-h3: 28px;
  --lh-h3: 1.3;
  --fw-h3: 500;

  --fs-body-lg: 18px;
  --lh-body-lg: 1.6;
  --fw-body-lg: 400;

  --fs-body-md: 16px;
  --lh-body-md: 1.6;
  --fw-body-md: 400;

  --fs-label-caps: 14px;
  --lh-label-caps: 1;
  --fw-label-caps: 600;
  --ls-label-caps: 0.05em;

  /* ---------- Layout ---------- */
  --container-max: 1280px;       /* equivalent to Tailwind max-w-7xl */
  --header-height: 76px;
  --bottom-nav-height: 64px;

  /* ---------- Motion ---------- */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 500ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Elevation ---------- */
  --shadow-bottom-nav: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Bootstrap-aware overrides — keep BS utilities aligned with our palette */
:root {
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 0, 50, 125;
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-on-surface);
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: var(--radius-default);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-container);
}