/* =========================================================================== CustomOps — Design Tokens Brand: Custom Heating & Air Conditioning, LLC · Church Hill, TN Primary brand red sampled from the official logo: #ED1C24 THEMING ------- Light is the DEFAULT (bare :root). Dark is opt-in via [data-theme="dark"], which the theme toggle writes onto . Because the default lives on a bare selector, the page paints light before a single line of JS runs — no flash of the wrong theme on first load. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Brand, type, space — theme independent --------------------------------------------------------------------------- */ :root { /* ---- Brand ---------------------------------------------------------- */ --brand: #ED1C24; --brand-hi: #FF3B42; --brand-lo: #C1121A; --brand-ink: #FFFFFF; --brand-wash: rgba(237, 28, 36, 0.10); --brand-wash-2: rgba(237, 28, 36, 0.20); --brand-glow: rgba(237, 28, 36, 0.28); /* ---- Typography ------------------------------------------------------ */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Playfair Display", "Times New Roman", Times, Georgia, serif; --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base:14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal:1.55; --fw-normal: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---- Space / radius / motion ---------------------------------------- */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 16px; --s-8: 20px; --s-9: 24px; --s-10: 32px; --s-11: 40px; --s-12: 48px; --s-13: 64px; --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px; --dur-fast: 110ms; --dur: 170ms; --dur-slow: 320ms; --ease: cubic-bezier(0.32, 0.72, 0.28, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Layout metrics -------------------------------------------------- */ --rail-w: 236px; --rail-w-collapsed: 62px; --topbar-h: 56px; --subbar-h: 44px; --maxw: 1680px; /* Minimum comfortable touch target; raised on coarse pointers below. */ --touch: 34px; /* Safe-area insets for notched phones (0 on everything else). */ --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); --z-base: 1; --z-sticky: 50; --z-rail: 100; --z-drawer: 400; --z-modal: 500; --z-palette: 600; --z-toast: 700; --z-tip: 800; --row-h: 42px; --pad-card: 18px; } /* --------------------------------------------------------------------------- 2. LIGHT — the default theme --------------------------------------------------------------------------- */ :root { color-scheme: light; --bg: #F4F6FA; --bg-grad: radial-gradient(1100px 620px at 82% -12%, rgba(237,28,36,0.07), transparent 58%), radial-gradient(880px 560px at 5% 104%, rgba(59,130,246,0.06), transparent 52%); --surface: #FFFFFF; --surface-2: #F7F9FC; --surface-3: #EEF2F8; --surface-4: #E3EAF3; --surface-inset: #F0F3F8; --overlay: rgba(18, 24, 35, 0.42); --line: #DFE5EE; --line-soft: #EBEFF5; --line-strong: #C4CEDC; --text: #0F1520; --text-2: #4A5568; --text-3: #6F7B8F; --text-4: #97A1B2; --text-inv: #FFFFFF; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 4px 14px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05); --shadow-lg: 0 18px 44px rgba(16,24,40,.13), 0 4px 10px rgba(16,24,40,.07); --shadow-xl: 0 30px 72px rgba(16,24,40,.18), 0 8px 20px rgba(16,24,40,.09); --ring: 0 0 0 3px rgba(237,28,36,.22); --grid-line: rgba(15,21,32,.06); --skeleton: linear-gradient(90deg, #EEF2F8 0%, #F8FAFC 50%, #EEF2F8 100%); /* Status palette tuned for contrast on light surfaces */ --c-slate: #64748B; --c-blue: #2563EB; --c-cyan: #0891B2; --c-teal: #0D9488; --c-green: #16A34A; --c-lime: #65A30D; --c-amber: #D97706; --c-orange: #EA580C; --c-red: #DC2626; --c-violet: #7C3AED; --c-pink: #DB2777; --c-indigo: #4F46E5; --tint-blue: rgba(59,130,246,.12); --tint-green: rgba(22,163,74,.13); --tint-amber: rgba(217,119,6,.14); --tint-red: rgba(220,38,38,.12); --tint-violet: rgba(124,58,237,.12); --tint-cyan: rgba(8,145,178,.13); --tint-slate: rgba(100,116,139,.13); --tint-teal: rgba(13,148,136,.13); --tint-orange: rgba(234,88,12,.13); --tint-pink: rgba(219,39,119,.12); --tint-indigo: rgba(79,70,229,.12); --tint-lime: rgba(101,163,13,.14); } /* --------------------------------------------------------------------------- 3. DARK — opt-in --------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --brand-wash: rgba(237, 28, 36, 0.12); --brand-wash-2: rgba(237, 28, 36, 0.22); --brand-glow: rgba(237, 28, 36, 0.35); --bg: #0A0D13; --bg-grad: radial-gradient(1200px 700px at 78% -10%, rgba(237,28,36,0.10), transparent 60%), radial-gradient(900px 600px at 8% 105%, rgba(59,130,246,0.07), transparent 55%); --surface: #10141C; --surface-2: #161C27; --surface-3: #1D2431; --surface-4: #253040; --surface-inset: #0C1017; --overlay: rgba(6, 9, 14, 0.72); --line: #232C3A; --line-soft: #1A212C; --line-strong: #354154; --text: #E9EDF5; --text-2: #A7B2C6; --text-3: #74809A; --text-4: #4E596E; --text-inv: #0A0D13; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 4px 14px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 18px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4); --shadow-xl: 0 32px 80px rgba(0,0,0,.62), 0 8px 24px rgba(0,0,0,.45); --ring: 0 0 0 3px rgba(237,28,36,.30); --grid-line: rgba(255,255,255,.05); --skeleton: linear-gradient(90deg, #161C27 0%, #1F2734 50%, #161C27 100%); --c-slate: #7C8AA5; --c-blue: #3B82F6; --c-cyan: #06B6D4; --c-teal: #14B8A6; --c-green: #22C55E; --c-lime: #84CC16; --c-amber: #F59E0B; --c-orange: #FB7139; --c-red: #EF4444; --c-violet: #8B5CF6; --c-pink: #EC4899; --c-indigo: #6366F1; --tint-blue: rgba(59,130,246,.15); --tint-green: rgba(34,197,94,.15); --tint-amber: rgba(245,158,11,.15); --tint-red: rgba(239,68,68,.15); --tint-violet: rgba(139,92,246,.15); --tint-cyan: rgba(6,182,212,.15); --tint-slate: rgba(124,138,165,.15); --tint-teal: rgba(20,184,166,.15); --tint-orange: rgba(251,113,57,.15); --tint-pink: rgba(236,72,153,.15); --tint-indigo: rgba(99,102,241,.15); --tint-lime: rgba(132,204,22,.15); } /* --------------------------------------------------------------------------- 4. Density + input modality --------------------------------------------------------------------------- */ :root[data-density="compact"] { --row-h: 34px; --pad-card: 14px; --fs-base: 13px; } /* Finger-driven devices get larger hit areas and slightly larger type. */ @media (pointer: coarse) { :root { --touch: 44px; --row-h: 52px; --fs-sm: 13px; --fs-md: 14px; --fs-base:15px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }