/* Church Security — Design tokens The one source for color, type, space, radius, glass and motion. Light by default. Dark: add class "dark" to (follow the system setting, let people override). */ :root { color-scheme: light; /* ---- Brand palette ---- */ --white: #FFFFFF; --glass-tint: #F4F8FD; --slate: #1C242B; --copper: #C86432; --clear: #2D6A4F; --alert: #B42318; /* ---- Canvas & solid surfaces ---- */ --page-bg: #FFFFFF; --surface: #FFFFFF; --group-bg: #F5F5F7; --group-hover: #EFEFF4; --field-bg: #F5F5F7; --divider: rgba(28, 36, 43, 0.065); --surface-edge: 0 0 0 0.5px rgba(28, 36, 43, 0.08), 0 1px 2px rgba(28, 36, 43, 0.04); --field-edge: inset 0 0 0 0.5px rgba(28, 36, 43, 0.10); --window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.11), 0 28px 70px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.05); --menu-bg: #FFFFFF; --shimmer-hi: #FCFCFE; --switch-off: rgba(120, 120, 128, 0.24); /* ---- Text ---- */ --text-main: #1C242B; --text-muted: #6E6E73; --mark-ink: #1C242B; /* Colored text that passes 4.5:1 on white and on its tint */ --copper-ink: #A34E22; --clear-ink: #2D6A4F; --alert-ink: #B42318; /* ---- Tints (status pills, icon wells) ---- */ --copper-tint: rgba(200, 100, 50, 0.11); --clear-tint: rgba(45, 106, 79, 0.10); --alert-tint: rgba(180, 35, 24, 0.08); --alert-tint-strong: rgba(180, 35, 24, 0.14); --neutral-tint: rgba(28, 36, 43, 0.06); /* ---- Action fills (white text on top) ---- */ --primary-fill: linear-gradient(180deg, #2D3A46 0%, #182026 100%); --primary-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 1px 0.5px rgba(255, 255, 255, 0.34), 0 4px 12px rgba(28, 36, 43, 0.22); --alert-fill: linear-gradient(180deg, #C42A1F 0%, #B42318 100%); --selected-bg: #1C242B; --selected-ink: #FFFFFF; /* ---- Liquid Glass ---- */ --glass-pill: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 249, 251, 0.72) 100%); --glass-pill-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.09), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.98), inset 0 -1px 1.5px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.055), 0 1px 2px rgba(0, 0, 0, 0.03); --glass-vessel: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(248, 251, 255, 0.62) 100%); --glass-vessel-shadow: 0 0 0 0.5px rgba(28, 36, 43, 0.07), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 1.5px rgba(28, 36, 43, 0.025), 0 18px 48px rgba(28, 36, 43, 0.07), 0 2px 6px rgba(28, 36, 43, 0.035); --glass-sidebar: linear-gradient(180deg, rgba(244, 244, 247, 0.84) 0%, rgba(236, 237, 242, 0.78) 100%); /* Blur recipes (write literally in backdrop-filter; Safari needs the -webkit- copy): vessel blur(36px) saturate(200%) sidebar blur(44px) saturate(185%) control blur(28px) saturate(190%) */ /* Ambient light behind the glass */ --ambient-ice: rgba(178, 208, 242, 0.55); --ambient-ice-2: rgba(204, 224, 248, 0.50); --ambient-copper: rgba(236, 172, 132, 0.30); /* ---- Type ---- */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --text-label: 12px; /* 600 · caps · 0.06em */ --text-caption: 13px; --text-body: 15px; --text-input: 16px; /* 16+ stops iPhone zoom on focus */ --text-headline: 17px; --text-title: 22px; /* 800 · -0.02em */ --text-display: 32px; /* 800 · -0.025em */ /* ---- Space (4px rhythm) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ---- Radius ---- */ --radius-field: 12px; --radius-tile: 16px; --radius-group: 20px; --radius-vessel: 28px; --radius-device: 36px; --radius-pill: 999px; /* ---- Touch ---- */ --touch: 44px; /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-press: 130ms; --dur: 180ms; --dur-sheet: 260ms; } :root.dark { color-scheme: dark; --page-bg: #0D1014; --surface: #171C23; --group-bg: #1E242C; --group-hover: #252C36; --field-bg: #1E242C; --divider: rgba(255, 255, 255, 0.08); --surface-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.09), 0 1px 2px rgba(0, 0, 0, 0.30); --field-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.10); --window-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.6); --menu-bg: #222932; --shimmer-hi: #2A323C; --switch-off: rgba(120, 120, 128, 0.40); --text-main: #F5F5F7; --text-muted: #98989D; --mark-ink: #F5F5F7; --copper-ink: #EE9A6E; --clear-ink: #74C99D; --alert-ink: #FF8A80; --copper-tint: rgba(238, 154, 110, 0.14); --clear-tint: rgba(116, 201, 157, 0.14); --alert-tint: rgba(255, 138, 128, 0.12); --alert-tint-strong: rgba(255, 138, 128, 0.20); --neutral-tint: rgba(255, 255, 255, 0.08); /* Copper is the dark-mode action; deepened so white text passes 4.5:1 */ --primary-fill: linear-gradient(180deg, #C05E2D 0%, #A34E22 100%); --primary-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 1px 0.5px rgba(255, 255, 255, 0.28), 0 4px 12px rgba(0, 0, 0, 0.35); --selected-bg: #AE5427; --selected-ink: #FFFFFF; --glass-pill: linear-gradient(180deg, rgba(50, 58, 70, 0.78) 0%, rgba(34, 40, 49, 0.68) 100%); --glass-pill-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), inset 0 1px 0.5px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35); --glass-vessel: linear-gradient(180deg, rgba(38, 45, 55, 0.74) 0%, rgba(25, 30, 38, 0.66) 100%); --glass-vessel-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10), inset 0 1px 0.5px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.45); --glass-sidebar: linear-gradient(180deg, rgba(34, 40, 49, 0.82) 0%, rgba(24, 29, 36, 0.78) 100%); --ambient-ice: rgba(56, 92, 140, 0.40); --ambient-ice-2: rgba(40, 70, 110, 0.35); --ambient-copper: rgba(200, 100, 50, 0.18); } /* Phones set to "Reduce transparency" get solid surfaces */ @media (prefers-reduced-transparency: reduce) { :root, :root.dark { --glass-pill: var(--surface); --glass-vessel: var(--group-bg); --glass-sidebar: var(--group-bg); } }