/* ========================================================================== GOTHAM ACCESS CONTROL NY — DESIGN TOKENS Dark theme · Deep navy + gold · Art Deco New York Every text/background pair below is verified against WCAG 2.2. Verify after any change: node tools/contrast.mjs ========================================================================== */ :root { color-scheme: dark; /* --------------------------------------------------------------- 1. SURFACE LAYERS (darkest → lightest, elevation increases) --------------------------------------------------------------- */ --bg-base: #070B14; /* page background — near-black navy */ --bg-surface: #0B1220; /* alternating sections */ --bg-elevated: #111A2C; /* cards */ --bg-raised: #18243B; /* card hover, inputs, popovers */ --bg-sunken: #04060C; /* footer, code, wells */ /* Translucent layers for glass / overlay work */ --bg-glass: rgba(17, 26, 44, 0.72); --bg-scrim: rgba(4, 6, 12, 0.88); --bg-scrim-soft: rgba(7, 11, 20, 0.55); /* --------------------------------------------------------------- 2. LINES & DIVIDERS --------------------------------------------------------------- */ --line-subtle: rgba(122, 145, 186, 0.14); /* decorative hairline */ --line: rgba(122, 145, 186, 0.22); /* default border */ --line-strong: #5A6E94; /* 3.02–3.84:1 — meets AA for UI components */ --line-gold: rgba(217, 174, 73, 0.38); --line-blue: rgba(76, 141, 255, 0.34); /* --------------------------------------------------------------- 3. TEXT (all ratios measured on --bg-base … --bg-raised) --------------------------------------------------------------- */ --text-strong: #F4F7FC; /* 14.44 – 18.33 : AAA — headings */ --text-body: #C3CEDF; /* 9.76 – 12.38 : AAA — paragraphs */ --text-muted: #93A3BC; /* 6.06 – 7.69 : AA+ — captions */ --text-faint: #7B8DA9; /* 4.60 – 5.83 : AA — meta, legal */ --text-on-gold: #070B14; /* 9.47 : AAA on gold fill */ --text-on-blue: #070B14; /* 6.15 : AA on blue fill */ /* --------------------------------------------------------------- 4. BRAND — GOLD (authority, warmth, the "premium" signal) --------------------------------------------------------------- */ --gold: #D9AE49; /* 9.47:1 on base — AAA as text */ --gold-bright: #EBC463; /* 11.82:1 — hover / emphasis */ --gold-deep: #A8801F; /* borders, pressed states */ --gold-shadow: #6E5210; --gold-wash: rgba(217, 174, 73, 0.10); --gold-wash-2: rgba(217, 174, 73, 0.18); --gold-glow: rgba(217, 174, 73, 0.30); /* Metallic gold gradient for the logo, rules and deco flourishes */ --gold-metal: linear-gradient( 135deg, #8A6A18 0%, #D9AE49 22%, #F6DC96 44%, #D9AE49 62%, #A8801F 82%, #EBC463 100% ); /* --------------------------------------------------------------- 5. BRAND — BLUE (technology, trust, the "security" signal) --------------------------------------------------------------- */ --blue: #4C8DFF; /* 6.15:1 on base — AA as text */ --blue-bright: #6FA5FF; /* 7.97:1 — hover */ --blue-deep: #1D4ED8; /* fills only — NOT for text on dark */ --blue-ink: #0E2450; /* deep field / gradient stop */ --blue-wash: rgba(76, 141, 255, 0.10); --blue-wash-2: rgba(76, 141, 255, 0.18); --blue-glow: rgba(76, 141, 255, 0.32); --blue-field: radial-gradient( 120% 100% at 50% 0%, rgba(76, 141, 255, 0.20) 0%, rgba(29, 78, 216, 0.08) 38%, transparent 72% ); /* --------------------------------------------------------------- 6. SEMANTIC --------------------------------------------------------------- */ --ok: #4ADE80; /* 11.29:1 AAA */ --ok-wash: rgba(74, 222, 128, 0.12); --warn: #FBBF24; /* 11.15:1 AAA */ --warn-wash: rgba(251, 191, 36, 0.12); --danger: #FB7185; /* 7.31:1 AAA */ --danger-wash: rgba(251, 113, 133, 0.12); /* --------------------------------------------------------------- 7. TYPOGRAPHY --------------------------------------------------------------- */ --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Fluid type scale — 1.200 ratio at 360px growing to 1.250 at 1440px */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem); --fs-xl: clamp(1.3125rem, 1.19rem + 0.55vw, 1.625rem); --fs-2xl: clamp(1.5rem, 1.31rem + 0.85vw, 2.0625rem); --fs-3xl: clamp(1.8125rem, 1.5rem + 1.36vw, 2.625rem); --fs-4xl: clamp(2.125rem, 1.66rem + 2.05vw, 3.375rem); --fs-5xl: clamp(2.5rem, 1.79rem + 3.13vw, 4.375rem); --fs-6xl: clamp(2.875rem, 1.75rem + 4.95vw, 5.625rem); --lh-tight: 1.08; --lh-snug: 1.22; --lh-heading: 1.14; --lh-normal: 1.6; --lh-relaxed: 1.75; --ls-tighter: -0.035em; --ls-tight: -0.02em; --ls-normal: -0.011em; --ls-wide: 0.06em; --ls-wider: 0.14em; --ls-widest: 0.22em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* Optimal measure for long-form reading */ --measure: 68ch; --measure-tight: 54ch; --measure-wide: 78ch; /* --------------------------------------------------------------- 8. SPACING (4px base grid) --------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 1.75rem; /* 28 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-14: 3.5rem; /* 56 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* Fluid vertical rhythm between page sections */ --section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7rem); --section-y-lg: clamp(4.5rem, 2.6rem + 8.2vw, 9.5rem); --section-y-sm: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); /* --------------------------------------------------------------- 9. LAYOUT --------------------------------------------------------------- */ --container: 1240px; --container-wide: 1440px; --container-text: 760px; --gutter: clamp(1.125rem, 0.65rem + 2.1vw, 2.5rem); --header-h: 74px; --header-h-sm: 62px; /* --------------------------------------------------------------- 10. RADIUS (restrained — Art Deco favours crisp geometry) --------------------------------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 26px; --r-pill: 999px; --deco-cut: 14px; /* stepped corner size for deco cards */ /* --------------------------------------------------------------- 11. ELEVATION Dark UI reads elevation through lighter surfaces + a rim light, not through heavy drop shadows. --------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 2px 6px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.34); --sh-3: 0 8px 22px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.32); --sh-4: 0 18px 44px rgba(0,0,0,.52), 0 5px 14px rgba(0,0,0,.34); --sh-5: 0 34px 78px rgba(0,0,0,.60), 0 10px 26px rgba(0,0,0,.38); --rim: inset 0 1px 0 rgba(255,255,255,.055); --rim-gold: inset 0 1px 0 rgba(246,220,150,.16); --glow-gold: 0 0 0 1px rgba(217,174,73,.30), 0 10px 34px -10px rgba(217,174,73,.42); --glow-blue: 0 0 0 1px rgba(76,141,255,.32), 0 10px 34px -10px rgba(76,141,255,.46); /* --------------------------------------------------------------- 12. MOTION --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-both: cubic-bezier(0.65, 0, 0.35, 1); --ease-deco: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms; --dur-slower: 620ms; /* --------------------------------------------------------------- 13. FOCUS (never remove — NY is a high-volume ADA venue) --------------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--gold); --focus-inset: inset 0 0 0 2px var(--gold); /* --------------------------------------------------------------- 14. Z-INDEX --------------------------------------------------------------- */ --z-base: 1; --z-sticky: 60; --z-header: 80; --z-drawer: 90; --z-modal: 100; --z-toast: 110; --z-skip: 120; } /* Users who ask for less motion get less motion. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } } /* Windows High Contrast / forced-colors: let the OS win. */ @media (forced-colors: active) { :root { --line: CanvasText; --line-strong: CanvasText; } }