/* ========================================================================== Zene Systems — design tokens Dark theme is the default: every page ships with . Choosing light in the navbar toggle removes it and is remembered in localStorage. Brand colours come from the ZS logo: navy #0E2748 and orange #C46208. Text colours are chosen to pass WCAG AA contrast on their backgrounds. ========================================================================== */ :root { color-scheme: light; /* Surfaces */ --bg: #FFFFFF; --surface: #F4F6F9; /* soft grey cards and bands */ --surface-strong: #E9EDF3; --border: #E1E6EE; --nav-bg: rgba(255, 255, 255, 0.88); /* Text */ --text: #0E1B2E; /* 16:1 on white */ --text-soft: #46546B; /* 7.6:1 on white */ --text-on-accent: #1A0E02; /* Brand */ --navy: #0A1A30; /* hero background in both themes */ --navy-2: #0E2748; --accent: #E57C1F; /* button fill */ --accent-hover: #F08A2C; --accent-text: #A64F00; /* orange used as text on white: 5.6:1 */ --accent-soft: #FFF1E3; --success: #1F7A4D; --danger: #B42318; /* Type */ --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); --fs-h2: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); --fs-h3: 1.3rem; --fs-lead: 1.15rem; /* Shape & spacing */ --radius: 24px; --radius-sm: 14px; --section-y: clamp(4rem, 3rem + 4vw, 7rem); --shadow: 0 10px 30px -18px rgba(14, 27, 46, 0.25); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0A1A30; --surface: #0F2442; --surface-strong: #163661; --border: #22406B; --nav-bg: rgba(10, 26, 48, 0.8); --text: #EEF2F8; --text-soft: #B2C0D4; --accent-text: #F2A33A; --accent-soft: #2A2416; --success: #5CC98F; --danger: #F28B82; --shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6); }