/* ========================================================================== Softigo — Design tokens Generated from the Softigo Claude Design system (project b8bdd8ed…). Do not hand-edit values here; update in the design system and re-sync. ========================================================================== */ /* Google Fonts are loaded from tags in each page's (with preconnect), not via @import here — @import blocks the browser from fetching the fonts in parallel with this file. */ :root{ --font-display:"Montserrat","Segoe UI",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* ---------- Brand ramp (sampled from the Softigo logo gradient) ---------- */ --violet-50:#F5F0FB;--violet-100:#E9DDF7;--violet-200:#D3BCEE;--violet-300:#B692DF; --violet-400:#9A6BCB;--violet-500:#7B3FA8;--violet-600:#6C3D9E;--violet-700:#57307E;--violet-800:#3F2360; --indigo-50:#EEF0FE;--indigo-100:#E0E3FD;--indigo-200:#C3C8FB;--indigo-300:#A0A7F7; --indigo-400:#818CF8;--indigo-500:#6366F1;--indigo-600:#4F51D6;--indigo-700:#3E40AC; --blue-50:#EFF6FF;--blue-100:#DBEAFE;--blue-200:#BFDBFE;--blue-300:#93C5FD; --blue-400:#60A5FA;--blue-500:#3B82F6;--blue-600:#2A6BD4;--blue-700:#1F52A6; --cyan-50:#ECFCFE;--cyan-100:#CFF7FB;--cyan-200:#A5EEF5;--cyan-300:#67DDE9; --cyan-400:#22C6DC;--cyan-500:#06B6D4;--cyan-600:#0895AE;--cyan-700:#0A7186; --teal-400:#5ECFCA;--teal-500:#3CBFBA;--teal-600:#2AA09C; /* ---------- Neutrals (cool, tinted toward the wordmark navy) ---------- */ --n-0:#FFFFFF;--n-25:#F9FBFD;--n-50:#F3F6FA;--n-100:#E8EDF4;--n-200:#D7DFEA; --n-300:#B7C3D3;--n-400:#8C9BAF;--n-500:#65788F;--n-600:#4A5D75; --n-700:#33455C;--n-800:#23405F;--n-900:#16283C;--n-950:#0D1A28; /* ---------- Semantic status ---------- */ --green-50:#ECFDF5;--green-500:#10B981;--green-600:#0E9F6E; --amber-50:#FFFBEB;--amber-500:#F59E0B;--amber-600:#D97F07; --red-50:#FEF2F2;--red-500:#EF4444;--red-600:#DC2626; /* ---------- Brand aliases ---------- */ --brand-primary:var(--indigo-500); --brand-primary-hover:var(--indigo-600); --brand-primary-press:var(--indigo-700); /* ---------- Gradients (the logo ribbon, left→right violet→blue→cyan) ---------- */ --gradient-brand:linear-gradient(120deg,var(--violet-500) 0%,var(--indigo-500) 38%,var(--blue-500) 66%,var(--cyan-500) 100%); --gradient-brand-soft:linear-gradient(120deg,var(--violet-50) 0%,var(--indigo-50) 45%,var(--cyan-50) 100%); --gradient-halo:radial-gradient(60% 60% at 70% 20%,rgba(99,102,241,.22) 0%,rgba(6,182,212,.10) 45%,rgba(255,255,255,0) 75%); /* ---------- Semantic surface / text / border ---------- */ --surface-page:var(--n-0); --surface-subtle:var(--n-50); --surface-card:var(--n-0); --surface-inverse:var(--n-900); --surface-brand-subtle:var(--indigo-50); --surface-disabled:var(--n-100); --text-heading:var(--n-900); --text-body:var(--n-700); --text-muted:var(--n-500); --text-subtle:var(--n-400); --text-on-brand:var(--n-0); --text-inverse-muted:var(--n-300); --text-link:var(--indigo-600); --text-link-hover:var(--violet-600); --border-subtle:var(--n-100); --border-default:var(--n-200); --border-strong:var(--n-300); --border-brand:var(--indigo-300); --focus-ring:rgba(99,102,241,.38); /* ---------- Type scale ---------- */ --text-display-1:clamp(40px,5vw,64px); --text-h1:36px;--text-h2:28px;--text-h3:22px;--text-h4:18px; --text-lg:18px;--text-md:16px;--text-sm:14px;--text-xs:13px;--text-2xs:11px; --leading-tight:1.08;--leading-snug:1.22;--leading-normal:1.5;--leading-relaxed:1.65; --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800; --tracking-tight:-0.02em;--tracking-snug:-0.01em;--tracking-wide:0.02em;--tracking-caps:0.08em; /* ---------- Spacing (4px grid) ---------- */ --space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-9:48px;--space-12:96px; --gap-inline:8px;--gap-card:24px;--section-y:96px;--section-y-mobile:56px; --page-max:1180px;--page-pad:24px; /* ---------- Radius ---------- */ --radius-control:10px;--radius-card:16px;--radius-icon:14px;--radius-md:12px;--radius-pill:999px; /* ---------- Elevation ---------- */ --shadow-xs:0 1px 2px rgba(22,40,60,.06); --shadow-sm:0 1px 3px rgba(22,40,60,.07),0 1px 2px rgba(22,40,60,.04); --shadow-lg:0 12px 28px rgba(22,40,60,.10),0 4px 8px rgba(22,40,60,.05); --shadow-xl:0 24px 56px rgba(22,40,60,.14); --shadow-brand:0 10px 24px rgba(99,102,241,.28); --shadow-brand-press:0 4px 10px rgba(99,102,241,.24); --ring-focus:0 0 0 3px var(--focus-ring); --blur-glass:saturate(160%) blur(12px); --overlay-scrim:rgba(13,26,40,.48); /* ---------- Motion ---------- */ --duration-fast:140ms;--duration-normal:220ms; --ease-standard:cubic-bezier(.2,.8,.2,1); --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); --lift-hover:translateY(-2px); --press-scale:scale(.98); } @media (prefers-reduced-motion:reduce){ :root{--duration-fast:0ms;--duration-normal:0ms;--lift-hover:none} }