/* ============================================================================= S3Access brand tokens ============================================================================= EXTRACTED, NOT RETYPED, from frontend/src/index.css on 2026-08-11. That file is the source of truth for the app; this one is the portable copy for anything outside it — the marketing site, store listings, partner material. If a value here ever disagrees with index.css, index.css wins. Framework-agnostic on purpose: plain custom properties, no Tailwind directives and no build step. Drop it in a and use var(--gm-primary). Dark mode is driven by a `dark` class on , not prefers-color-scheme, because the app has an explicit theme toggle. A marketing site is free to use the media query instead — the VALUES are what matter. DELIBERATELY OMITTED (they exist in index.css and are product-only, not brand): --gm-swipe-edit-* and --gm-swipe-del-* colour the swipe actions on a resident's guest row, and --gm-toast-* colour the in-app notifications. Nothing outside the app has a swipe row or a toast to paint. ========================================================================== */ :root { color-scheme: light; /* Ground and surfaces. The page ground is deliberately NOT white: white cards need something to lift off, or the whole layout reads flat. */ --gm-bg: #e8eef6; --gm-surface: #ffffff; --gm-surface-2: #f4f7fb; --gm-border: #e4eaf2; --gm-border-strong: #c3d0de; --gm-text: #0f172a; --gm-muted: #5a6b80; --gm-subtle: #8695a8; /* THE BRAND COLOUR. Navy steel-blue, sampled from the S3Access shield rather than picked from a palette generator. Settled 2026-07-24 and not up for revisiting. */ --gm-primary: #1e5f8e; --gm-primary-on: #14486f; --gm-primary-weak: #dcebf7; /* Action accent — navy, matching the mark. See BRAND.md on why the green that appears in gate screenshots is NOT a second brand colour. */ --gm-cta: #1e5f8e; --gm-cta-hover: #17496e; --gm-cta-on: #14486f; --gm-cta-weak: #dcebf7; /* Positive STATUS, never an action: synced, healthy, saved. */ --gm-success: #16a34a; --gm-success-on: #166534; --gm-success-weak: #dcfce7; --gm-amber-on: #b45309; --gm-amber-weak: #fef3c7; --gm-amber-border: #fcd34d; --gm-danger: #b91c1c; --gm-danger-weak: #fecaca; --gm-danger-border: #f87171; /* Elevation. Shadows are tinted with the brand navy, not neutral black — black over a cool grey ground reads as smoke. */ --gm-elev-1: 0 1px 2px rgba(16, 42, 67, 0.05), 0 1px 3px rgba(16, 42, 67, 0.07); --gm-elev-2: 0 1px 2px rgba(16, 42, 67, 0.05), 0 6px 16px -4px rgba(16, 42, 67, 0.12); --gm-elev-3: 0 2px 12px rgba(16, 42, 67, 0.08); --gm-elev-4: 0 12px 32px -8px rgba(16, 42, 67, 0.2); --gm-elev-bar: 0 -3px 16px rgba(16, 42, 67, 0.1); } .dark { color-scheme: dark; --gm-bg: #0b1220; --gm-surface: #0f172a; --gm-surface-2: #0c1526; --gm-border: #1f2a3d; --gm-border-strong: #334155; --gm-text: #e2e8f0; --gm-muted: #94a3b8; --gm-subtle: #64748b; /* ⚠ The brand navy LIGHTENS in dark mode — #1e5f8e on a #0b1220 ground is unreadable. Use #4ea3d9 for a navy element on dark, and never sample the light-mode navy out of a dark screenshot. */ --gm-primary: #4ea3d9; --gm-primary-on: #a6d2ee; --gm-primary-weak: rgba(78, 163, 217, 0.14); --gm-cta: #4ea3d9; --gm-cta-hover: #3d8cbf; --gm-cta-on: #a6d2ee; --gm-cta-weak: rgba(78, 163, 217, 0.14); --gm-success: #22c55e; --gm-success-on: #86efac; --gm-success-weak: rgba(34, 197, 94, 0.14); --gm-amber-on: #fbbf24; --gm-amber-weak: rgba(245, 158, 11, 0.12); --gm-amber-border: rgba(245, 158, 11, 0.32); /* ⚠ Several "weak" tokens are TRANSLUCENT in dark and one flips brighter: --gm-danger is a LIGHT red here. Check the dark value before using any of these as a solid fill. */ --gm-danger: #f87171; --gm-danger-weak: #641616; --gm-danger-border: #b91c1c; /* Depth in dark comes from a 1px inset top highlight, not a drop shadow — a shadow does almost nothing against a dark ground. */ --gm-elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.05); --gm-elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px -10px rgba(0, 0, 0, 0.65); --gm-elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px -6px rgba(0, 0, 0, 0.6); --gm-elev-4: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px -10px rgba(0, 0, 0, 0.75); --gm-elev-bar: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 -4px 18px -6px rgba(0, 0, 0, 0.6); } /* PRODUCT-ONLY, included so screenshots make sense: the guard terminal keeps GREEN actions, because to someone standing at a barrier green means GO. It is an operational cue, not branding — a marketing site should not use it. */ .surface-gate { --gm-cta: #16a34a; --gm-cta-hover: #15803d; --gm-cta-on: #166534; --gm-cta-weak: #dcfce7; } .dark .surface-gate { --gm-cta: #22c55e; --gm-cta-hover: #16a34a; --gm-cta-on: #86efac; --gm-cta-weak: rgba(34, 197, 94, 0.14); }