/* ════════════════════════════════════════════════════════════════ First Nation Fidelity — Real Estate Lending Capital tokens.css — design system primitives v2 — 2026-04-28 — institutional editorial rebrand ════════════════════════════════════════════════════════════════ Direction: Goldman/Apollo/Cresco institutional. Editorial register. Ink + brass + parchment. Emerald only on funded outcomes. Hard rules: - No Tailwind utility classes in markup. Semantic classes only. - Brass appears on ≤ 8% of any screen. Singular use = signal. - Emerald only when we say "funded" or show a closed deal. - Type scale uses clamp() — fluid, no breakpoint thrash. */ :root { /* ─── Ink (institutional foundation) ─── */ /* Cooler than AJL — FNF is real estate not boutique training */ --ink: #0A0F1C; /* deepest — page background, hero */ --ink-1: #11192A; /* primary section dark */ --ink-2: #1A2438; /* card / elevated surface */ --ink-3: #25304A; /* hover, secondary surface */ --ink-4: #36425E; /* tertiary, used for hairlines on dark */ --ink-line: rgba(176, 138, 79, 0.16); /* brass-tinted hairline */ /* ─── Brass (institutional gold — NOT candy gold) ─── */ /* Reads as library leather + brass nameplate, not jewelry store. */ --brass: #B08A4F; --brass-bright: #C9A570; --brass-deep: #8C6E3D; --brass-pale: #E8DCC2; --brass-soft: rgba(176, 138, 79, 0.08); --brass-line: rgba(176, 138, 79, 0.24); /* ─── Money signals ─── */ --emerald: #0F6F4F; /* "funded" — wins only */ --emerald-deep: #093D2C; --emerald-glow: #16A075; /* used VERY sparingly */ --crimson: #6B1220; /* "lost a deal" — pain section only */ --crimson-deep: #3A0810; /* ─── Paper (light sections — warm parchment, NOT pure white) ─── */ --paper: #F4EFE5; /* primary light — reads "private memo" */ --paper-2: #ECE6D9; /* secondary light — section break */ --paper-3: #FCF9F2; /* lightest — modal backgrounds */ /* ─── Neutrals ─── */ --gray-l: #B6B0A4; /* warm cool gray, not flat */ --gray: #6E6960; --gray-d: #3D3A33; /* ─── On-surface text ─── */ --on-ink: #ECE6D9; /* body text on dark backgrounds */ --on-ink-dim: rgba(236, 230, 217, 0.62); --on-ink-mute: rgba(236, 230, 217, 0.42); --on-paper: #11192A; /* body text on light backgrounds */ --on-paper-dim: rgba(17, 25, 42, 0.66); --on-paper-mute: rgba(17, 25, 42, 0.42); /* ─── Type families ─── */ --display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --display-it: 'Instrument Serif', Georgia, serif; /* italic variant */ --body: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ─── Type scale (fluid where it matters) ─── */ --t-mono-xs: 11px; --t-mono: 13px; --t-body-xs: 13px; --t-body-sm: 14.5px; --t-body: 16px; --t-body-lg: 18px; --t-body-xl: 20px; --t-h6: 22px; --t-h5: 26px; --t-h4: clamp(28px, 3.2vw, 38px); --t-h3: clamp(36px, 4.4vw, 56px); --t-h2: clamp(44px, 6vw, 80px); --t-h1: clamp(56px, 8.5vw, 116px); --t-display: clamp(72px, 11vw, 168px); /* ─── Letter-spacing (display goes tighter, mono goes looser) ─── */ --tr-tight: -0.025em; /* hero display */ --tr-snug: -0.015em; /* h2/h3 */ --tr-normal: 0; --tr-wide: 0.04em; /* eyebrow labels */ --tr-wider: 0.12em; /* uppercase nav, button micro-label */ /* ─── Line-heights ─── */ --lh-display: 0.96; --lh-tight: 1.08; /* h1, h2 */ --lh-snug: 1.18; /* h3, h4 */ --lh-normal: 1.45; --lh-relaxed: 1.6; /* body */ --lh-loose: 1.8; /* legal text */ /* ─── Spacing (8-base, named on intent not size) ─── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 120px; --s-11: 160px; --s-12: 200px; /* ─── Section vertical rhythm (clamp-driven so mobile breathes) ─── */ --sec-pad: clamp(80px, 12vw, 160px); --sec-pad-tight: clamp(64px, 8vw, 120px); /* ─── Radii (low — institutional reads square, not rounded) ─── */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 100px; --r-round: 9999px; /* ─── Motion ─── */ /* Easings have personalities — pick by intent, not aesthetic */ --ease-silk: cubic-bezier(0.22, 0.61, 0.36, 1); /* default UI out */ --ease-drama: cubic-bezier(0.2, 0.8, 0.2, 1); /* hero reveals */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* magnetic / playful */ --ease-editor: cubic-bezier(0.65, 0, 0.35, 1); /* serif text reveals */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* smooth out */ /* Durations — UI feedback is fast, hero reveals are deliberate */ --d-ui: 160ms; --d-fast: 240ms; --d-base: 400ms; --d-slow: 640ms; --d-hero: 900ms; --d-stagger: 80ms; /* ─── Shadows / depth (3-plane system) ─── */ /* Plane 0: page surface (no shadow) Plane 1: card / elevated (sh-card) Plane 2: modal / floating (sh-float) Hairline = 1px brass tint, used as separator instead of box shadows */ --sh-card: 0 8px 30px -16px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(176, 138, 79, 0.08); --sh-float: 0 24px 60px -28px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(176, 138, 79, 0.12); --sh-deep: 0 40px 100px -40px rgba(0, 0, 0, 0.75); --sh-edit: inset 0 1px 0 rgba(176, 138, 79, 0.18), 0 24px 48px -24px rgba(0, 0, 0, 0.7); --sh-halo: 0 0 0 1px rgba(176, 138, 79, 0.28), 0 12px 32px -12px rgba(176, 138, 79, 0.32); --glow-brass: 0 0 60px rgba(176, 138, 79, 0.32); --glow-em: 0 0 60px rgba(15, 111, 79, 0.28); /* ─── Glass (used VERY sparingly — only on hero overlay nav after scroll) ─── */ --glass-ink: rgba(10, 15, 28, 0.92); --glass-paper: rgba(244, 239, 229, 0.92); --glass-blur: blur(18px) saturate(140%); /* ─── Atmosphere gradients (radial, layered for depth) ─── */ /* Apply with: background-image: var(--g-aurora-warm); */ --g-aurora-warm: radial-gradient(ellipse 80% 60% at 18% 22%, rgba(176, 138, 79, 0.10) 0%, transparent 55%), radial-gradient(ellipse 60% 80% at 82% 78%, rgba(15, 111, 79, 0.06) 0%, transparent 60%); --g-aurora-cool: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(54, 66, 94, 0.5) 0%, transparent 60%), radial-gradient(ellipse 60% 70% at 20% 80%, rgba(26, 36, 56, 0.7) 0%, transparent 65%); /* ─── Cursor tracking (set via JS for cursor-reactive effects) ─── */ --cx: 50%; --cy: 50%; --scroll: 0; /* 0..1 page scroll progress */ /* ─── Layout ─── */ --container: 1280px; /* max content width */ --container-wide: 1440px; /* hero / wide grid */ --container-prose: 720px; /* legal, longform */ --gutter: max(24px, 4vw); /* ─── Z-stack (named, not magic numbers) ─── */ --z-base: 0; --z-elev: 10; --z-overlay: 20; --z-nav: 40; --z-modal: 60; --z-toast: 80; } /* ─── Reduced motion: collapse all timing tokens to 0 ─── */ @media (prefers-reduced-motion: reduce) { :root { --d-ui: 0ms; --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-hero: 0ms; --d-stagger: 0ms; } } /* ─── Selection highlight ─── */ ::selection { background: var(--brass); color: var(--ink); }