/* ============================================================ HVAC Super App — shared design tokens (Apple HIG light theme) Loaded by every calculator that follows the standard palette. The asli-selector uses its own dark-panel palette inline. ============================================================ */ :root{ /* ── Surfaces ─────────────────────────────────────────── */ --bg: #F5F5F7; --surface: #FFFFFF; --surface-2: #FAFAFA; --surface-3: #F2F2F7; /* ── Hairlines & borders ─────────────────────────────── */ --hairline: rgba(0,0,0,.08); --border: rgba(0,0,0,.12); --divider: #E5E5EA; /* ── Text ─────────────────────────────────────────────── */ --text: #1D1D1F; --text-2: #6E6E73; --text-3: #8E8E93; /* ── Accent (system blue) + tints ────────────────────── */ --accent: #007AFF; --accent-tint: rgba(0,122,255,.10); --accent-tint-2:rgba(0,122,255,.06); --ring: rgba(0,122,255,.25); /* ── Semantic colours ────────────────────────────────── */ --success: #34C759; --warning: #FF9500; --danger: #FF3B30; --info: #5AC8FA; --purple: #AF52DE; --teal: #5AC8FA; --mint: #00C7BE; /* ── Semantic tints ──────────────────────────────────── */ --success-tint: rgba(52,199,89,.14); --warning-tint: rgba(255,149,0,.14); --warning-tint-2:rgba(255,149,0,.06); --danger-tint: rgba(255,59,48,.14); --info-tint: rgba(90,200,250,.14); --purple-tint: rgba(175,82,222,.14); /* ── Type ─────────────────────────────────────────────── */ --font: "Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif; --font-num: "Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; --mono: ui-monospace,"SF Mono","Cascadia Code","Consolas",monospace; /* ── Legacy aliases ──────────────────────────────────── */ /* Pre-redesign code uses these names — keep so inline style="color:var(--ok)" etc. still works. */ --primary: #007AFF; --dark: #1D1D1F; --panel: #F5F5F7; --ok: #34C759; --warn: #FF9500; --green: #34C759; --orange: #FF9500; --red: #FF3B30; --yellow: #FFCC00; } /* ============================================================ DARK THEME — applied when . Values follow Apple HIG dark palette. ============================================================ */ [data-theme="dark"]{ /* ── Surfaces ─────────────────────────────────────────── */ --bg: #1c1c1e; --surface: #2c2c2e; --surface-2: #3a3a3c; --surface-3: #48484a; /* ── Hairlines & borders ─────────────────────────────── */ --hairline: rgba(255,255,255,.10); --border: rgba(255,255,255,.18); --divider: #38383a; /* ── Text ─────────────────────────────────────────────── */ --text: #f5f5f7; --text-2: #c7c7cc; --text-3: #8e8e93; /* ── Accent (system blue, brighter in dark) + tints ──── */ --accent: #0A84FF; --accent-tint: rgba(10,132,255,.20); --accent-tint-2:rgba(10,132,255,.12); --ring: rgba(10,132,255,.40); /* ── Semantic colours (vivid variants for dark bg) ───── */ --success: #30D158; --warning: #FF9F0A; --danger: #FF453A; --info: #64D2FF; --purple: #BF5AF2; --teal: #64D2FF; --mint: #66D4CF; /* ── Semantic tints (more saturated since bg is dark) ── */ --success-tint: rgba(48,209,88,.22); --warning-tint: rgba(255,159,10,.22); --warning-tint-2:rgba(255,159,10,.12); --danger-tint: rgba(255,69,58,.22); --info-tint: rgba(100,210,255,.22); --purple-tint: rgba(191,90,242,.22); /* ── Legacy aliases ──────────────────────────────────── */ --primary: #0A84FF; --dark: #f5f5f7; --panel: #1c1c1e; --ok: #30D158; --warn: #FF9F0A; --green: #30D158; --orange: #FF9F0A; --red: #FF453A; --yellow: #FFD60A; } /* Print: always force light theme — no one prints dark UIs. */ @media print { [data-theme="dark"]{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#F5F5F7; --text:#000000; --text-2:#333333; --text-3:#666666; --hairline:rgba(0,0,0,.10); --border:rgba(0,0,0,.20); --divider:#CCCCCC; } }