/* ============================================================ FeeCrunch — Design Tokens · v8 (Royal Blue / Silver-Chrome) Single source of truth. Import this first; build on the vars. Fonts (load in ): Archivo 600–900 · Instrument Sans 400–600 · Spline Sans Mono 400–700 ============================================================ */ :root{ /* ---------- Brand color ---------- */ --navy:#0A1733; --navy-2:#0B1D45; --navy-3:#14306E; --blue:#1B4FD6; --blue-2:#1640AE; --blue-lt:#5B8DEF; /* primary action / brand */ --red:#E11420; --red-2:#B80F19; /* high-energy action ONLY (Crunch, primary CTA) */ /* ---------- Silver / steel ---------- */ --silver:#C7D0E0; --silver-2:#AEB9CE; --silver-lt:#EAEEF6; --steel:#7E8AA6; --steel-dk:#525E78; /* ---------- Blue-chrome (static, palette-integrated) ---------- Vertical gradient: white highlight → silver-blue → NAVY horizon (50%) → highlight. The navy band is what reads as polished metal AND keeps it on-brand. */ --chrome:linear-gradient(180deg,#F6F9FE 0%,#CAD6EE 18%,#8195C2 40%,#22376C 50%,#46608F 57%,#A6B7DB 80%,#ECF1FB 100%); --chrome-edge:linear-gradient(90deg,#E6EDF8,#8FA0C8 28%,#22376C 52%,#7E93C0 74%,#E6EDF8); /* hairlines / top edges */ --chrome-shadow:drop-shadow(0 1px 0 rgba(10,23,51,.5)); /* REQUIRED on chrome text so it reads on light bg */ --metal:linear-gradient(135deg,#F4F7FC 0%,#D5DDEC 38%,#AEB9CE 52%,#CBD4E4 70%,#EAEEF6 100%); /* soft brushed silver */ /* ---------- Neutrals / surfaces ---------- */ --bg:#EDF1F8; --mist:#EDF1F8; --mist-2:#E3EAF6; --card:#FFFFFF; --ink:#0A1733; --muted:#586079; --line:#E2E7F0; --gray:#9AA4BC; /* ---------- Feedback ---------- */ --green:#16A34A; --green-bg:#EAF7EE; /* ---------- Type ---------- */ --font-display:"Archivo",sans-serif; /* headlines, numbers, labels — uppercase, tight */ --font-body:"Instrument Sans",system-ui,sans-serif; --font-mono:"Spline Sans Mono",monospace; /* all currency / data — tabular-nums */ /* ---------- Spacing (4pt scale) ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; /* ---------- Radius ---------- */ --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; /* ---------- Elevation ---------- */ --sh-sm:0 6px 14px -10px rgba(10,23,51,.25); --sh-card:0 26px 54px -36px rgba(10,23,51,.40), inset 0 1px 0 rgba(255,255,255,.8); --sh-pop:0 44px 90px -34px rgba(4,12,40,.74); --sh-red:0 12px 26px -12px rgba(225,20,32,.72); --sh-blue:0 12px 26px -12px rgba(27,79,214,.60); /* ---------- Motion ---------- */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.18s; /* ---------- Layout ---------- */ --maxw:1200px; color-scheme:light; /* REQUIRED: prevents OS dark-mode from force-darkening the light design */ } /* Breakpoints (reference, not tokens): 1080px → app input/output split stacks 960px → landing calculator + feature panel stack 760px → app sidebar hides (single column) 560px → chips / feature grid go single column */