/* ==========================================================================
FHE Traders — Design System
========================================================================== */
:root {
/* Ink — headings, copy and fine detail. Dark enough to read on the light
surfaces below, never used as a page background any more. */
--ink-900: #16304f;
--ink-800: #21456b;
--ink-700: #325a84;
--ink-600: #47739f;
/* Sky — the light surface family the whole site now sits on. 50/100/200 are
backgrounds, 500/600/700 are fills and interactive states. */
--sky-50: #eaf3ff;
--sky-100: #d5e7fa;
--sky-200: #b9d5f2;
--sky-300: #96bfe9;
--sky-500: #4a8ed6;
--sky-600: #2f6cb0;
--sky-700: #1f5291;
/* Amber stays the brand accent. 500/600 are fills, 700 is the text-safe
shade — amber now lands on white instead of navy, so labels need it. */
--amber-500: #f5a623;
--amber-600: #dd8f10;
--amber-700: #96600a;
--amber-100: #fff4e0;
--green-600: #16a34a;
--green-700: #128a3e;
--wa-green: #25d366;
--wa-green-dark: #1ebe57;
--bg: #eaf2fc;
--surface: #ffffff;
--text: #2a3f57;
--text-muted: #61748c;
--border: #cbdff2;
--cat-solar-1: #f7b733; --cat-solar-2: #c9860a;
--cat-inverter-1: #2f7bf6; --cat-inverter-2: #1a4fc4;
--cat-battery-1: #22c55e; --cat-battery-2: #0f8a3e;
--cat-distribution-1: #a855f7; --cat-distribution-2: #6d28d9;
--cat-security-1: #f0384a; --cat-security-2: #b91c2c;
--cat-appliances-1: #14b8a6; --cat-appliances-2: #0d7d70;
--cat-fittings-1: #6366f1; --cat-fittings-2: #4338ca;
--cat-stands-1: #78909c; --cat-stands-2: #455a64;
--cat-vfd-1: #fb923c; --cat-vfd-2: #c2410c;
--cat-fans-1: #22d3ee; --cat-fans-2: #0e7490;
--cat-wiring-1: #d97706; --cat-wiring-2: #92400e;
--cat-lighting-1: #facc15; --cat-lighting-2: #a16207;
--red-600: #e11d2f;
--fab-size: 56px; /* diameter of every floating action button */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 8px rgba(38, 74, 117, 0.07);
--shadow-md: 0 8px 24px rgba(38, 74, 117, 0.10);
--shadow-lg: 0 20px 48px rgba(38, 74, 117, 0.14);
--container: 1180px;
--header-h: 76px;
}
/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: 'Poppins', 'Inter', sans-serif;
color: var(--ink-900);
line-height: 1.22;
margin: 0 0 0.5em;
font-weight: 700;
}
p { margin: 0 0 1em; color: var(--text-muted); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
/* These `display: block` rules outrank the browser's own [hidden] style, so a
hidden ![]()
/