/* ============================================================ Form Now — Landing 2.0 · Design Tokens Source of truth: Figma "Landing 2.0" (file fWsDZfUgh5nJoju2DkXGk2) Extracted via get_variable_defs. Do not hard-code hex in section CSS — always reference these variables so dark/light stay 1-to-1. ============================================================ */ :root { /* ---- Raw neutral ramps (1 = base bg … 12 = primary text) ---- */ --dark-1:#111110; --light-1:#FEFDF9; --dark-2:#1A1918; --light-2:#FBF9F4; --dark-3:#232221; --light-3:#F3F0E9; --dark-4:#2A2928; --light-4:#ECE8DF; --dark-5:#32312F; --light-5:#E5E1D6; --dark-6:#3B3A38; --light-6:#DDD9CF; --dark-7:#494846; --light-7:#D2CEC4; --dark-8:#615F5D; --light-8:#BFBBB1; --dark-9:#706E6B; --light-9:#908C83; --dark-10:#7D7B78; --light-10:#868178; --dark-11:#B7B4AF; --light-11:#666259; --dark-12:#F1EEE7; --light-12:#232018; /* ---- Raw accent ramps (1 = subtle … 4 = strongest) ---- */ --acc-dark-1:#1F1D45; --acc-light-1:#ECEDFF; --acc-dark-2:#3F42A8; --acc-light-2:#D0D2F2; --acc-dark-3:#5F63E6; --acc-light-3:#A2A6EE; /* provisional: not yet seen in a section, confirm if used */ --acc-dark-4:#8F94FF; --acc-light-4:#391ED4; /* ---- System ---- */ --white:#FFFFFF; --black:#000000; /* ---- Typography ---- */ --font-sans:"Supreme Variable","Supreme","DM Sans",system-ui,sans-serif; --font-display:"Midnight Sans RD Pro",var(--font-sans); /* ---- Spacing scale (Figma spacing/*) ---- */ --sp-0_5:2px; --sp-1:4px; --sp-1_5:6px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-12:48px; /* semantic spacing aliases (Figma padding/relaxed/*) */ --gap-head:16px; /* head-gap */ --gap-head-content:48px; /* head-content-gap */ --gap-content:24px; /* content-gap */ --gap-blocks:48px; /* blocks-gap */ --gap-actions:24px; /* actions-gap */ /* ---- Radius ---- */ --radius-xs:4px; --radius-6:6px; --radius-md:8px; --radius-2xl:16px; --radius-full:9999px; /* ---- Borders / strokes ---- */ --border-1:1px; --stroke-1-5:1.5px; /* ---- Layout ---- */ --content-max:1440px; /* Figma "Content 1440" — desktop content cap */ --paragraph-max:720px; /* Figma "max-width/paragraph" — mobile content cap */ --pad-desktop:24px; /* desktop side margins */ --pad-mobile:16px; /* mobile side padding */ --breakpoint:1024px; /* single breakpoint */ /* ---- Shadows (theme-neutral; tuned for light bg, see --shadow-contrast for dark) ---- */ --shadow-xs:0 1px 2px rgba(35,32,24,0.05); --shadow-sm:0 1px 3px rgba(35,32,24,0.10), 0 1px 2px rgba(35,32,24,0.06); --shadow-contrast:0 0 24px rgba(0,0,0,0.25); /* "On Black Contrast" */ /* ---- State ---- */ --alpha-disabled:0.38; } /* ============================================================ Theme resolution — semantic ramp (--c-1..12, --acc-1..4) Base = LIGHT. System dark via prefers-color-scheme (no override). Footer toggle sets to override. ============================================================ */ :root, [data-theme="light"] { --c-1:var(--light-1); --c-2:var(--light-2); --c-3:var(--light-3); --c-4:var(--light-4); --c-5:var(--light-5); --c-6:var(--light-6); --c-7:var(--light-7); --c-8:var(--light-8); --c-9:var(--light-9); --c-10:var(--light-10); --c-11:var(--light-11); --c-12:var(--light-12); --acc-1:var(--acc-light-1); --acc-2:var(--acc-light-2); --acc-3:var(--acc-light-3); --acc-4:var(--acc-light-4); --btn-text:var(--light-12); --on-accent:var(--white); /* text/icon on accent-4 fill (acc-4 is dark in light theme) */ --shadow-color:rgba(0,0,0,0.05); /* drop/inner shadow alpha — 5% on light, 15% on dark */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --c-1:var(--dark-1); --c-2:var(--dark-2); --c-3:var(--dark-3); --c-4:var(--dark-4); --c-5:var(--dark-5); --c-6:var(--dark-6); --c-7:var(--dark-7); --c-8:var(--dark-8); --c-9:var(--dark-9); --c-10:var(--dark-10); --c-11:var(--dark-11); --c-12:var(--dark-12); --acc-1:var(--acc-dark-1); --acc-2:var(--acc-dark-2); --acc-3:var(--acc-dark-3); --acc-4:var(--acc-dark-4); --btn-text:var(--dark-12); --on-accent:var(--black); /* acc-4 is light in dark theme */ --shadow-color:rgba(0,0,0,0.15); color-scheme: dark; } } [data-theme="dark"] { --c-1:var(--dark-1); --c-2:var(--dark-2); --c-3:var(--dark-3); --c-4:var(--dark-4); --c-5:var(--dark-5); --c-6:var(--dark-6); --c-7:var(--dark-7); --c-8:var(--dark-8); --c-9:var(--dark-9); --c-10:var(--dark-10); --c-11:var(--dark-11); --c-12:var(--dark-12); --acc-1:var(--acc-dark-1); --acc-2:var(--acc-dark-2); --acc-3:var(--acc-dark-3); --acc-4:var(--acc-dark-4); --btn-text:var(--dark-12); --on-accent:var(--black); --shadow-color:rgba(0,0,0,0.15); color-scheme: dark; }