/* ===================================================================
Beita (ביתא) Donation Portal — Design Tokens
RTL-first, Hebrew primary.
Source of truth: distilled from the Beita design handoff
(2026-05-19, Variation A — Stripe-vibe). The portal uses ONLY the
subset needed for donor-facing surfaces; display/signage tokens and
the ritual Shofar font are intentionally excluded.
=================================================================== */
/* Fonts — Heebo (Hebrew body + UI) + Rubik (display) + Inter (Latin).
No Shofar (decision 2026-05-19: Variation A doesn't use ritual font).
Loaded via + in each
page (font-sweep 2026-06-10) instead of a render-blocking CSS
import directive, which delayed first paint behind a serial request chain. */
:root {
/* ── BRAND ────────────────────────────────────────────────────── */
--brand-teal: #00897B;
--brand-gold: #D4A843;
--brand-navy: #0F172A;
--brand-blue: #2563EB;
/* Canonical cross-page brand aliases — the shared primary/secondary the
whole donor ecosystem (donate + portal) should resolve to, so pages
stop diverging. NOTE: gold (--brand-gold) is INTENTIONALLY retained as
the pledge / dedication / ritual accent (see GOLD SCALE below) — it is
NOT a brand inconsistency. */
--brand-primary: #2563eb; /* = --brand-blue */
--brand-secondary: #0F172A; /* = --brand-navy */
--brand-accent: #1d4ed8; /* = --blue-700 */
--brand-surface: #f8fafc; /* = --gray-50 */
/* ── NEUTRALS — cool slate ramp (slight blue tint, NOT pure gray) */
--white: #ffffff;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #6b7c93;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a; /* = --brand-navy */
/* ── BLUE SCALE (primary CTA) ─────────────────────────────────── */
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--blue-600: #2563eb; /* = --brand-blue */
--blue-700: #1d4ed8;
/* ── TEAL SCALE (recurring donations — warm, human, long-term) ── */
--teal-50: #E0F2F1;
--teal-100: #B2DFDB;
--teal-400: #26A69A;
--teal-500: #00897B;
--teal-600: #00796B;
--teal-700: #00695C;
/* ── GOLD SCALE (pledges, dedications, ritual accents) ────────── */
--gold-50: #FFFBEB;
--gold-100: #FEF3C7;
--gold-200: #FDE68A;
--gold-400: #F59E0B;
--gold-500: #D4A843;
--gold-600: #B8902F;
--gold-700: #92400E;
/* ── SEMANTIC ─────────────────────────────────────────────────── */
--success: #10B981;
--success-light: #D1FAE5;
--success-dark: #047857;
--warning: #F59E0B;
--warning-light: #FEF3C7;
--warning-dark: #B45309;
--error: #DC2626;
--error-light: #FEE2E2;
--error-dark: #991B1B;
--info: #2563EB;
--info-light: #DBEAFE;
/* ── THIRD-PARTY ──────────────────────────────────────────────── */
--whatsapp: #25D366;
/* ── TYPOGRAPHY ───────────────────────────────────────────────── */
--font-hebrew: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Rubik', 'Heebo', sans-serif;
--font-latin: 'Inter', system-ui, sans-serif;
--font-sans: var(--font-hebrew);
/* Type scale — mirrors admin/app_typography.dart */
--fs-kpi-lg: 28px; --fw-kpi-lg: 700;
--fs-kpi-md: 20px; --fw-kpi-md: 700;
--fs-h1: 40px; --fw-h1: 900; --ls-h1: -1px; /* portal hero — tighter than marketing */
--fs-h2: 28px; --fw-h2: 800; --ls-h2: -0.5px;
--fs-h3: 22px; --fw-h3: 700;
--fs-h4: 18px; --fw-h4: 600;
--fs-section: 15px; --fw-section: 700;
--fs-body: 15px; --fw-body: 400; --lh-body: 1.5;
--fs-body-sm: 13px;
--fs-caption: 12px;
--fs-micro: 11px;
--fs-button: 14px; --fw-button: 600;
/* ── SPACING — 4px base ───────────────────────────────────────── */
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 12px;
--sp-base: 16px;
--sp-lg: 20px;
--sp-xl: 24px;
--sp-2xl: 32px;
--sp-3xl: 40px;
--sp-huge: 48px;
/* ── RADIUS ───────────────────────────────────────────────────── */
--r-sm: 6px;
--r-md: 8px;
--r-base: 10px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 20px;
--r-3xl: 24px;
--r-pill: 999px;
/* ── SHADOWS (soft, never harsh) ─────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-card: 0 2px 8px rgba(0,0,0,0.03);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
--shadow-xl: 0 24px 64px rgba(0,0,0,0.10);
--shadow-blue: 0 6px 24px rgba(59, 130, 246, 0.30);
--shadow-blue-lg: 0 10px 36px rgba(59, 130, 246, 0.40);
--shadow-teal: 0 6px 24px rgba(0, 137, 123, 0.25);
/* ── BORDERS ──────────────────────────────────────────────────── */
--border-card: 1px solid var(--gray-200);
--border-subtle: 1px solid var(--gray-100);
--border-focus: 2px solid var(--blue-600);
/* ── MOTION ──────────────────────────────────────────────────── */
--dur-fast: 150ms;
--dur-normal: 200ms;
--dur-med: 300ms;
--dur-slow: 500ms;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── LAYOUT ──────────────────────────────────────────────────── */
--container-max: 1200px;
--container-px: 32px;
--nav-height: 64px;
--mobile-break: 720px;
/* ── SAFE AREAS (notch / home indicator on mobile) ───────────── */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ── Reduced motion respect ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}