/* FMS Industrial — color tokens. Values transcribed verbatim from the Figma file. */
:root{
/* base palette */
--fms-ink:#030304; /* rgb(3,3,4) headings, primary buttons, wordmark */
--fms-gray-800:#1D1D1F; /* dark surfaces, nav CTA (rgb 29,29,31) */
--fms-gray-750:#1B1D1F; /* rare dark fill (rgb 27,29,31) */
--fms-gray-700:#46464A; /* body text (rgb 70,70,74) */
--fms-gray-600:#5F5E60; /* ghost glyphs on placeholders */
--fms-gray-500:#77767B; /* tertiary text, overlines (rgb 119,118,123) */
--fms-gray-450:#868587; /* faint caption (rgb 134,133,135) */
--fms-ink-soft:#1A1C1C; /* checklist item text (rgb 26,28,28) */
--fms-white:#FFFFFF;
--fms-bg:#F9F9F9; /* page background (rgb 249,249,249) */
--fms-bg-band:#F3F3F3; /* full-bleed transition bands (rgb 243,243,243) */
--fms-bg-inset:#EEEEEE; /* framed placeholder panels (rgb 238,238,238) */
--fms-shell:#E8E8E8; /* device shells, skeleton bars (rgb 232,232,232) */
--fms-border:#E2E2E2; /* card hairline (rgb 226,226,226) */
--fms-border-mist:#C7C6CA; /* soft border base — used at .2/.3/.5 alpha */
--fms-blue:#005CBA; /* brand accent (rgb 0,92,186) */
--fms-blue-tint:rgba(0,92,186,.1); /* icon chips */
--fms-blue-chip:#D7E3FF; /* light blue icon chip (rgb 215,227,255) */
--fms-navy:#001B3E; /* glyph on blue chip (rgb 0,27,62) */
--fms-green:#28A745; /* success checks (rgb 40,167,69) */
--fms-red:#E30000; /* danger / "before" glyphs (rgb 227,0,0) */
--fms-red-tint:#FFDAD6; /* NOK badge fill (rgb 255,218,214) */
--fms-red-deep:#93000A; /* NOK badge text (rgb 147,0,10) */
/* semantic aliases */
--surface-page:var(--fms-bg);
--surface-card:var(--fms-white);
--surface-sunken:var(--fms-bg);/* sunken card on white section */
--surface-band:var(--fms-bg-band);
--surface-dark:var(--fms-gray-800);
--surface-glass:rgba(255,255,255,.7);
--surface-glass-dark:rgba(29,29,31,.5); /* frosted overlay on photos/dark */
--text-heading:var(--fms-ink);
--text-body:var(--fms-gray-700);
--text-tertiary:var(--fms-gray-500);
--text-list:var(--fms-ink-soft);
--text-on-dark:#FFFFFF;
--text-on-dark-soft:rgba(255,255,255,.8);
--border-card:var(--fms-border);
--border-soft:rgba(199,198,202,.2);
--border-soft-30:rgba(199,198,202,.3);
--border-soft-50:rgba(199,198,202,.5);
--accent:var(--fms-blue);
--accent-tint:var(--fms-blue-tint);
--link:var(--fms-blue);
}
/* FMS Industrial — type tokens + text styles observed in the Figma file. */
:root{
--font-display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
/* display scale (Manrope) */
--text-hero-xl:72px; /* rare hero */
--text-hero-lg:64px; /* detail-page hero, lh 1.1, ls -2% */
--text-h1:48px; /* lh 52.8, ls -0.96px */
--text-h1-compact:28px; /* compact page hero, lh 33.6, ls -0.56px */
--text-h2:32px; /* lh 38.4, ls -0.32px */
--text-h3:24px; /* lh 31.2, ls -0.24px */
--text-h4:20px; /* lh 28 */
/* body scale (Inter) */
--text-lede:18px; /* lh 28.8 */
--text-base:16px; /* lh 25.6 (24 in tight rows) */
--text-sm:14px; /* lh 21 */
--text-label:12px; /* 600, lh 14.4, ls +0.6px */
--text-overline:11px; /* 500, lh 13.2, ls +0.55px, uppercase */
}
/* Text style classes (match Figma values exactly) */
.fms-hero{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:70.4px;letter-spacing:-1.28px;color:var(--text-heading)}
.fms-h1{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:52.8px;letter-spacing:-.96px;color:var(--text-heading)}
.fms-h1-compact{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:33.6px;letter-spacing:-.56px;color:var(--text-heading)}
.fms-h2{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:38.4px;letter-spacing:-.32px;color:var(--text-heading)}
.fms-h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:31.2px;letter-spacing:-.24px;color:var(--text-heading)}
.fms-h4{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:28px;color:var(--text-heading)}
.fms-lede{font-family:var(--font-body);font-weight:400;font-size:18px;line-height:28.8px;color:var(--text-body)}
.fms-body{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:25.6px;color:var(--text-body)}
.fms-body-sm{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:21px;color:var(--text-body)}
.fms-label{font-family:var(--font-body);font-weight:600;font-size:12px;line-height:14.4px;letter-spacing:.6px;color:var(--text-heading)}
.fms-overline{font-family:var(--font-body);font-weight:500;font-size:11px;line-height:13.2px;letter-spacing:.55px;text-transform:uppercase;color:var(--text-tertiary)}
.fms-eyebrow{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:25.6px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-heading)}
.fms-wordmark{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:28px;letter-spacing:-.5px;color:var(--text-heading)}
.fms-wordmark-footer{font-family:var(--font-display);font-weight:900;font-size:20px;line-height:28px;color:var(--text-heading)}
/* FMS Industrial — spacing, radius, layout tokens (values as used in the Figma file). */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--page-width:1280px;
--content-width:1152px; /* page-width minus 64px gutters */
--content-narrow:896px;
--content-prose:672px; /* centered section subtitles */
--gutter:64px;
--section-pad-y:80px;
--section-gap:128px; /* between homepage sections */
--card-gap:24px;
--card-pad:32px;
--card-pad-sm:24px;
--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px; /* default card */
--radius-lg:16px; /* CTA panels, framed visuals */
--radius-xl:24px; /* hero screenshot card, role cards */
--radius-2xl:32px; /* device shells */
--radius-pill:9999px;
}
/* FMS Industrial — elevation, borders, blur. Cards draw their hairline as an INSET box-shadow, not a border. */
:root{
--ring-card:inset 0 0 0 1px var(--fms-border);
--ring-soft:inset 0 0 0 1px rgba(199,198,202,.2); /* @kind shadow */
--ring-soft-30:inset 0 0 0 1px rgba(199,198,202,.3); /* @kind shadow */
--ring-glass:inset 0 0 0 1px rgba(255,255,255,.4); /* @kind shadow */
--ring-glass-dark:inset 0 0 0 1px rgba(255,255,255,.14); /* @kind shadow */
--shadow-xs:0px 1px 2px 0px rgba(0,0,0,.05);
--shadow-sm:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1);
--shadow-md:0px 10px 15px -3px rgba(0,0,0,.1),0px 4px 6px -4px rgba(0,0,0,.1);
--shadow-card:0px 10px 40px -10px rgba(0,0,0,.08);
--shadow-float:0px 20px 40px 0px rgba(0,0,0,.05);
--shadow-showcase:0px 20px 60px 0px rgba(0,0,0,.08);
--shadow-hero:0px 20px 80px 0px rgba(0,0,0,.08);
--shadow-device:0px 25px 50px -12px rgba(0,0,0,.25);
--shadow-blue:0px 10px 40px 0px rgba(0,102,204,.15);
--blur-nav:blur(24px); /* @kind other */
--blur-glass-sm:blur(12px); /* @kind other */
--protect-gradient:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%); /* @kind other */
--fade-top:linear-gradient(180deg,rgba(249,249,249,0) 0%,#F9F9F9 100%); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--dur-fast:150ms; /* @kind other */
--dur-base:300ms; /* @kind other */
--dur-reveal:600ms; /* @kind other */
}
/* FMS Industrial — light base layer */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:16px;line-height:25.6px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,p{margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--fms-ink)}
button{font-family:var(--font-body)}
::selection{background:rgba(0,92,186,.15)}