/* FormsPal sign-up — design tokens * -------------------------------------------------------------------------- * Drop this in once (global stylesheet / Nuxt css array) and every FormsPal * sign-up component reads from it. Same variable names the mockups and the Vue * reference use, so markup + CSS lift in and "just work". * * Theme: dark-first (matches ai.formspal.com). Default = dark; set * for light. Your app owns that attribute. * * If you need to avoid global collisions, scope this under a wrapper class * (e.g. .fp-signup { ... }) instead of :root — the variable names stay the same. * -------------------------------------------------------------------------- */ :root { /* brand */ --primary: #16a571; /* green — links, accents */ --primary-2: #34c188; /* green, lighter (eyebrows, checks) */ --cta: #ec6810; /* vibrant orange — primary button */ --cta-hover: #e0610d; /* text */ --ink: #f2f5f7; /* primary text */ --ink-soft: #aab5bf; /* secondary text */ --faint: #8a939d; /* tertiary / placeholder (AA on dark cards) */ /* surfaces & lines */ --bg: #15181b; /* input background */ --surface: #1e2329; /* card / form background */ --surface-2: #252b32; /* social buttons, chips */ --hover: #2c333b; --line: #2a3036; /* borders */ --line-2: #3a434c; /* hover borders */ /* cream "legal-paper" brand panel */ --paper: #23201b; --paper-hi: #27241e; /* radial highlight */ --paper-ink: #efe9dc; /* text on paper */ --paper-soft: #b0a892; /* muted text on paper */ --paper-line: #37322a; /* dividers on paper */ /* page backdrop (radial gradient endpoints) */ --page-a: #1b1f23; --page-b: #121417; /* trustpilot widget — empty half-star */ --tp-empty: #41464d; /* type */ --font-head: 'Cormorant Garamond', Georgia, serif; /* serif headings */ --font-body: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* radius */ --radius-card: 18px; --radius-field: 10px; --radius-cta: 11px; /* elevation */ --modal-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 6px rgba(0,0,0,.4), 0 32px 72px -18px rgba(0,0,0,.72); --inset: inset 0 1px 2px rgba(0,0,0,.32); --btn-shadow: 0 1px 2px rgba(0,0,0,.32); --btn-shadow-h: 0 5px 13px rgba(0,0,0,.46); --cta-shadow: 0 3px 11px -2px rgba(214,88,12,.5); } :root[data-theme="light"] { --primary: #0b7a51; /* darkened for WCAG AA link text on white (5.4:1) */ --primary-2: #0c7a52; --cta: #ec6810; --cta-hover: #e0610d; --ink: #1c2530; --ink-soft: #566472; --faint: #5f6975; /* darkened for AA tertiary text on white (5.6:1) */ --bg: #f3f5f6; --surface: #ffffff; --surface-2: #f1f4f5; --hover: #eef1f3; --line: #e4e8ea; --line-2: #d4dade; --paper: #faf7ef; --paper-hi: #fdfbf4; --paper-ink: #23303a; --paper-soft: #5b6770; --paper-line: #eae6da; --page-a: #f9fbfc; --page-b: #eceff2; --tp-empty: #dcdce6; --modal-shadow: 0 1px 2px rgba(20,30,40,.05), 0 10px 22px -8px rgba(20,30,40,.10), 0 36px 66px -16px rgba(20,30,40,.20); --inset: inset 0 1px 2px rgba(20,30,40,.05); --btn-shadow: 0 1px 2px rgba(20,30,40,.05); --btn-shadow-h: 0 5px 13px rgba(20,30,40,.12); --cta-shadow: 0 3px 11px -2px rgba(214,88,12,.32); }