/* * Rawq landing page styles. * * The design system mirrors the app exactly (same palette tokens, * same Reem Kufi for Arabic, same warm-cream paper feel). The page * IS the brand: restraint, generous whitespace, content as hero. */ /* ── Fonts ───────────────────────────────────────────────────────── */ @font-face { font-family: 'Reem Kufi'; src: url('assets/fonts/ReemKufi-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; /* Subset hint — Arabic-only range, saves a render-blocking parse */ unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ── Palette (matches @/theme/colors.ts exactly) ─────────────────── */ :root { --paper: #F4EFE6; --paper-recess: #EDE6D9; --elevated: #FBF7EE; --ink: #1A1714; --ink-soft: #524A40; --ink-muted: #8A8073; --ink-faint: #B6AC9C; --divider: #E2D9C8; --hairline: rgba(26, 23, 20, 0.10); --accent: #9C7B3E; --accent-deep: #7D6029; /* Type scale — fluid, system-font-friendly */ --t-micro: 12px; --t-caption: 13px; --t-body: 17px; --t-lg: 20px; --t-xl: 28px; --t-hero: clamp(40px, 8vw, 64px); --t-arabic-flourish: clamp(40px, 7vw, 56px); --gap-section: clamp(64px, 10vw, 112px); } /* * Theme resolution order: * 1. If is set (manual override), it wins. * 2. Else, follow the OS via prefers-color-scheme. * The toggle script sets data-theme on first load (so there's no flash) * and persists the choice to localStorage. See