/* ============================================================ HVAC Super App — Google / Material 3 design tokens (Workspace look: Drive + Calendar) Scoped under html[data-skin="google"] (not :root) so it can sit in the same as css/tokens.css without touching skin 1. This file is the ONLY thing a new skin has to replace. It defines two layers: 1. --m3-* the Material 3 role tokens (the real palette) 2. legacy the names the calculator CSS already speaks (--bg, --surface, --accent, --text, --ok ...) mapped onto the M3 roles. Dark theme rides the same data-theme="dark" hook that js/iframe-bridge.js sets from the shell's hvac:theme message. No web fonts: 'Google Sans' / 'Roboto' if the machine has them, otherwise the system stack. Nothing is downloaded. ============================================================ */ html[data-skin="google"]{ color-scheme:light; /* ── M3 primary (Google blue) ─────────────────────────── */ --m3-primary: #0B57D0; --m3-on-primary: #FFFFFF; --m3-primary-container: #D3E3FD; --m3-on-primary-container: #041E49; --m3-primary-hover: #0842A0; --m3-state-hover: rgba(11,87,208,.08); --m3-state-press: rgba(11,87,208,.12); /* ── M3 surfaces (Drive's pale-grey page + white cards) ─ */ --m3-surface: #FFFFFF; --m3-surface-container-lowest: #FFFFFF; --m3-surface-container-low: #F8FAFD; --m3-surface-container: #F0F4F9; --m3-surface-container-high: #E9EEF6; --m3-surface-container-highest: #E1E6EF; /* ── M3 content ───────────────────────────────────────── */ --m3-on-surface: #1F1F1F; --m3-on-surface-variant: #444746; --m3-on-surface-muted: #80868B; --m3-outline: #747775; --m3-outline-variant: #C4C7C5; --m3-hairline: #E3E3E3; /* ── M3 semantic (Google green / amber / red) ─────────── */ --m3-success: #146C2E; --m3-success-container: #C4EED0; --m3-on-success-container:#072711; --m3-warning: #A85D00; --m3-warning-container: #FFDEA6; --m3-on-warning-container:#3B2300; --m3-error: #B3261E; --m3-error-container: #F9DEDC; --m3-on-error-container: #410E0B; /* ── M3 elevation (Material 3 shadow ramp) ────────────── */ --m3-el1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15); --m3-el2: 0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15); --m3-el3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.30); /* ── M3 shape scale ───────────────────────────────────── */ --m3-r-xs: 4px; /* outlined text field */ --m3-r-sm: 8px; /* chips, small containers */ --m3-r-md: 12px; /* inner cards */ --m3-r-lg: 16px; /* Drive cards */ --m3-r-xl: 28px; /* dialogs, bottom sheet */ --m3-r-full:999px; /* pills */ /* ============================================================ LEGACY ALIASES — the names the calculator markup/CSS uses. Remap these and the whole app changes skin. ============================================================ */ --bg: var(--m3-surface-container-low); --surface: var(--m3-surface); --surface-2: var(--m3-surface-container-low); --surface-3: var(--m3-surface-container); --hairline: var(--m3-hairline); --border: var(--m3-outline-variant); --divider: var(--m3-hairline); --text: var(--m3-on-surface); --text-2: var(--m3-on-surface-variant); --text-3: var(--m3-on-surface-muted); --accent: var(--m3-primary); --accent-tint: var(--m3-primary-container); --accent-tint-2: rgba(11,87,208,.06); --ring: rgba(11,87,208,.24); --success: var(--m3-success); --warning: var(--m3-warning); --danger: var(--m3-error); --info: var(--m3-primary); --purple: #7B1FA2; --teal: #00796B; --mint: #00897B; --success-tint: var(--m3-success-container); --warning-tint: var(--m3-warning-container); --warning-tint-2:rgba(232,116,0,.08); --danger-tint: var(--m3-error-container); --info-tint: var(--m3-primary-container); --purple-tint: rgba(123,31,162,.12); /* ── Type: Google Sans / Roboto first, system after ────── */ --font: "Google Sans","Google Sans Text","Product Sans",Roboto,"Segoe UI",system-ui,-apple-system,sans-serif; --font-num: "Google Sans Text",Roboto,"Segoe UI",system-ui,-apple-system,sans-serif; --mono: "Roboto Mono","Cascadia Mono",Consolas,ui-monospace,monospace; /* ── Legacy colour aliases still used inline in the HTML ─ */ --primary: var(--m3-primary); --dark: var(--m3-on-surface); --panel: var(--m3-surface-container-low); --ok: var(--m3-success); --warn: var(--m3-warning); --green: var(--m3-success); --orange: var(--m3-warning); --red: var(--m3-error); --yellow: #E37400; /* ── Colours the old Apple CSS hard-coded — now tokens ── */ --on-success-strong: var(--m3-on-success-container); --on-warning-strong: var(--m3-on-warning-container); --on-danger-strong: var(--m3-on-error-container); --on-accent-strong: var(--m3-on-primary-container); } /* ============================================================ DARK — , set by the iframe bridge. Material 3 dark: near-black surfaces, light blue primary. ============================================================ */ html[data-skin="google"][data-theme="dark"]{ color-scheme:dark; --m3-primary: #A8C7FA; --m3-on-primary: #062E6F; --m3-primary-container: #0842A0; --m3-on-primary-container: #D3E3FD; --m3-primary-hover: #C2E7FF; --m3-state-hover: rgba(168,199,250,.10); --m3-state-press: rgba(168,199,250,.16); --m3-surface: #1B1B1B; --m3-surface-container-lowest: #0E0E0E; --m3-surface-container-low: #131314; --m3-surface-container: #1E1F20; --m3-surface-container-high: #282A2C; --m3-surface-container-highest: #333537; --m3-on-surface: #E3E3E3; --m3-on-surface-variant: #C4C7C5; --m3-on-surface-muted: #9AA0A6; --m3-outline: #8E918F; --m3-outline-variant: #444746; --m3-hairline: #333537; --m3-success: #6DD58C; --m3-success-container: #0A3818; --m3-on-success-container:#C4EED0; --m3-warning: #FFB868; --m3-warning-container: #4A2D00; --m3-on-warning-container:#FFDEA6; --m3-error: #F2B8B5; --m3-error-container: #601410; --m3-on-error-container: #F9DEDC; --m3-el1: 0 1px 2px 0 rgba(0,0,0,.60), 0 1px 3px 1px rgba(0,0,0,.30); --m3-el2: 0 1px 2px 0 rgba(0,0,0,.60), 0 2px 6px 2px rgba(0,0,0,.30); --m3-el3: 0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.60); /* in dark an inset must be LIGHTER than its card, not darker */ --surface-2: var(--m3-surface-container-high); --surface-3: var(--m3-surface-container-highest); --border: var(--m3-outline); --accent-tint-2: rgba(168,199,250,.10); --ring: rgba(168,199,250,.35); --warning-tint-2:rgba(255,184,104,.12); --purple: #D0BCFF; --purple-tint: rgba(208,188,255,.16); --yellow: #FFB868; /* dark needs the CONTAINER as the readable text colour, not the on-container (which is the dark ink that pairs with a light chip) */ --on-success-strong: var(--m3-on-success-container); --on-warning-strong: var(--m3-on-warning-container); --on-danger-strong: var(--m3-on-error-container); --on-accent-strong: var(--m3-on-primary-container); } /* Print: never print a dark UI. */ @media print{ html[data-skin="google"][data-theme="dark"]{ --m3-surface:#FFFFFF; --m3-surface-container-lowest:#FFFFFF; --m3-surface-container-low:#FFFFFF; --m3-surface-container:#F5F5F5; --m3-surface-container-high:#EEEEEE; --m3-surface-container-highest:#E8E8E8; --m3-on-surface:#000000; --m3-on-surface-variant:#333333; --m3-on-surface-muted:#666666; --m3-hairline:#CCCCCC; --m3-outline:#888888; --m3-outline-variant:#CCCCCC; --m3-primary:#0B57D0; --m3-primary-container:#D3E3FD; --m3-el1:none; --m3-el2:none; --m3-el3:none; } }