/* ============================================================================= NetZero Aqua — design tokens ============================================================================= Sampled from img/logo/logo-lockup.png, not chosen by eye. The mark holds three colours: #00243C the wordmark ground #3BD304 the ring and the NET ZERO wordmark #004AF7 the ΛQUΛ wordmark These values are the CURRENT lockup. An earlier pass sampled logo3.png, whose ring was a muted #84D860 and which had no blue at all; the shell on top of that ran on #0d2745 and #7dc142, near-misses of a mark that has since been replaced. Everything is now on the sampled values. If the lockup changes again, re-sample here rather than nudging by eye. CONTRAST, MEASURED ------------------ #3BD304 on white is 2.0:1. WCAG AA wants 4.5:1 for body text and 3:1 for large text and UI boundaries, so the brand green fails all three — by a wide margin, not marginally. It is for accents, borders, fills and text on dark grounds only. Never small text on white. Where a green text colour is genuinely wanted on white, use --nz-lime-text (#217A00), measured at 5.46:1. The blue is the better-behaved of the two: #004AF7 is 6.32:1 on white and 5.89:1 on the tinted page, so it carries body text and small UI safely. On the navy it drops to 2.52:1 and must NOT be used there — dark grounds take the lifted --nz-blue-lift (#80A6FF, 6.69:1 on navy) instead. There are two lifts, for two different jobs. --nz-blue-lift is the console lift: the buddy console is read outdoors in glare, so it is carried well past AA to 6.69:1 on purpose. --nz-blue-lift-min is the BRAND lift, used where the logo blue itself has to be recognisable — the marketing hero, the sign-in panel: #004AF7 raised only as far as it has to be, 4.51:1 on navy, and no further. Picking the wrong one is not a contrast bug, it is the wordmark looking like a different blue in two places. On the brand navy the green is 7.97:1, which is why the sidebar can use it freely. White on navy is 15.94:1. Every ratio above was computed, not estimated. This file defines tokens only. It sets no layout and claims no element selectors, so it is safe to load before any other stylesheet. ========================================================================== */ :root { /* ---- Brand ---- */ --nz-navy: #00243C; /* sampled: the mark's ground */ --nz-navy-deep: #001830; /* sampled: its darker shade */ --nz-navy-soft: #002448; /* sampled: the mid tone */ --nz-navy-tint: #0A3A5C; /* lifted, for hover on dark surfaces */ /* Sampled from the ΛQUΛ wordmark. --nz-blue carries text and small UI on light grounds (6.32:1 on white); --nz-blue-lift is the SAME hue lifted for dark grounds, where the base measures only 2.52:1. They are not interchangeable — sending either to the other's ground is the mistake this pair exists to prevent. */ --nz-blue: #004AF7; /* sampled: the ΛQUΛ wordmark */ --nz-blue-lift: #80A6FF; /* console lift, 6.69:1 — glare headroom */ --nz-blue-lift-min: #4C82FF; /* brand lift, 4.51:1 — closest to the mark */ --nz-blue-deep: #0039BF; /* darkened, for pressed states */ --nz-blue-soft: #EDF2FE; /* tint, for fills on white */ --nz-lime: #3BD304; /* sampled: the ring */ --nz-lime-deep: #2EA503; /* darkened, for pressed states */ --nz-lime-soft: #EBFBE6; /* 8% lime on white, for fills */ --nz-lime-text: #217A00; /* 4.9:1 on white — safe for small text */ /* ---- Surfaces ---- */ --nz-page: #F4F7FC; --nz-surface: #FFFFFF; --nz-surface-alt: #F8FAFD; --nz-border: #E5EAF2; --nz-border-strong: #CBD5E1; /* ---- Text ---- */ --nz-text: #0F172A; --nz-text-2: #475569; /* 7.4:1 on white */ --nz-text-3: #64748B; /* 4.8:1 on white — the lightest usable */ --nz-text-on-dark: #FFFFFF; --nz-text-on-dark-2: rgba(255, 255, 255, 0.72); /* ---- Status ---- Not brand colours. Green here must not be confused with the brand lime: a lime "success" badge next to a lime logo reads as decoration rather than state, so success is a distinctly different green. */ --nz-ok: #15803D; --nz-ok-soft: #F0FDF4; --nz-warn: #B45309; --nz-warn-soft: #FFFBEB; --nz-danger: #B91C1C; --nz-danger-soft: #FEF2F2; --nz-info: #1D4ED8; --nz-info-soft: #EFF6FF; /* ---- Role accents ---- Each of the three consoles gets one identifying colour, so a screenshot is immediately placeable and an admin never mistakes which site they are looking at. */ --nz-role-admin: #3BD304; /* brand lime */ --nz-role-buddy: #F59E0B; /* amber — the field layer */ --nz-role-farmer: #3B82F6; /* blue */ /* ---- Geometry ---- */ --nz-radius: 14px; --nz-radius-sm: 10px; --nz-radius-pill: 999px; /* ---- Elevation ---- Tinted with the brand navy rather than neutral black; a shadow of pure black over a navy-and-lime palette reads as grey sludge. */ --nz-shadow-sm: 0 1px 2px rgba(0, 36, 60, 0.06); --nz-shadow: 0 4px 14px rgba(0, 36, 60, 0.10); --nz-shadow-lg: 0 12px 32px rgba(0, 36, 60, 0.16); --nz-shadow-xl: 0 24px 60px rgba(0, 36, 60, 0.24); /* ---- Motion ---- One easing curve everywhere. Mixed curves read as inconsistency even when nobody can say why. */ --nz-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --nz-fast: 0.15s; --nz-normal: 0.28s; } /* The app shells were written against --shell-* tokens. Rather than rename several hundred declarations across three stylesheets — a change with real risk and no visible benefit — the old names are re-pointed at the sampled values. New work uses --nz-*. */ :root { --shell-navy: var(--nz-navy); --shell-navy-deep: var(--nz-navy-deep); --shell-lime: var(--nz-lime); --shell-accent: var(--nz-blue); --shell-accent-soft: var(--nz-blue-soft); --shell-page: var(--nz-page); --shell-surface: var(--nz-surface); --shell-surface-alt: var(--nz-surface-alt); --shell-border: var(--nz-border); --shell-text: var(--nz-text); --shell-text-2: var(--nz-text-2); --shell-text-3: var(--nz-text-3); --shell-radius: var(--nz-radius); --shell-radius-sm: var(--nz-radius-sm); --shell-ok: var(--nz-ok); --shell-warn: var(--nz-warn); --shell-danger: var(--nz-danger); } @media (prefers-reduced-motion: reduce) { :root { --nz-fast: 0s; --nz-normal: 0s; } }