/* ============================================================================ PiCall — theme pack Loaded AFTER picall-refresh.css. Pure overrides of the custom properties that sheet already styles everything through, so a theme is just a palette swap: no markup changes, no behaviour, nothing to keep in sync. Each theme sets a ground, a text ramp, and ONE accent. Semantic colours (success / warning / danger) are tuned per theme rather than reused, because a green that reads as "resolved" on white disappears on near-black. carries two attributes: data-theme = which palette (picks the block below) data-mode = "light" | "dark" (drives the legacy-colour compat rules) ========================================================================= */ /* ---------------------------------------------------------------- LIGHT --- */ /* 1. Teal — the PiCall default, kept as the baseline. */ :root[data-theme="teal"] { --cc-bg:#FBFBFC; --cc-surface:#FFFFFF; --cc-surface-sunk:#F5F6F8; --cc-border:#E7E9EC; --cc-border-strong:#D8DCE1; --cc-text:#15181D; --cc-text-2:#3D444E; --cc-muted:#757C87; --cc-primary:#0E7C8C; --cc-primary-hover:#0B6675; --cc-primary-soft:#E6F3F6; --cc-primary-line:#A8D5DE; --cc-success:#0E7C5A; --cc-success-soft:#E4F3EE; --cc-accent:#9A6216; --cc-accent-soft:#FBF1E3; --cc-danger:#B4232B; --cc-danger-soft:#FBEAEB; } /* 2. Graphite — near-monochrome. For people who want the UI to disappear. */ :root[data-theme="graphite"] { --cc-bg:#FAFAFA; --cc-surface:#FFFFFF; --cc-surface-sunk:#F2F2F3; --cc-border:#E4E4E6; --cc-border-strong:#D2D2D6; --cc-text:#111112; --cc-text-2:#3A3A3E; --cc-muted:#78787E; --cc-primary:#2B2B30; --cc-primary-hover:#141417; --cc-primary-soft:#EDEDEF; --cc-primary-line:#C9C9CE; --cc-success:#186B47; --cc-success-soft:#E6F1EB; --cc-accent:#8A5A12; --cc-accent-soft:#F6EEE1; --cc-danger:#A8202A; --cc-danger-soft:#F7E7E8; } /* 3. Kilimanjaro — cool slate ground, deep forest accent. */ :root[data-theme="kilimanjaro"] { --cc-bg:#F7F9F8; --cc-surface:#FFFFFF; --cc-surface-sunk:#EDF2F0; --cc-border:#DFE7E3; --cc-border-strong:#CBD8D2; --cc-text:#101815; --cc-text-2:#33443D; --cc-muted:#6B7C75; --cc-primary:#1F6B4A; --cc-primary-hover:#17543A; --cc-primary-soft:#E3F1EA; --cc-primary-line:#A9D3BF; --cc-success:#1F6B4A; --cc-success-soft:#E3F1EA; --cc-accent:#8C6212; --cc-accent-soft:#F6EFDF; --cc-danger:#A93226; --cc-danger-soft:#F8E8E6; } /* 4. Serengeti — warm ochre on a soft warm grey (not cream). */ :root[data-theme="serengeti"] { --cc-bg:#FAF8F5; --cc-surface:#FFFFFF; --cc-surface-sunk:#F3EFE9; --cc-border:#E8E1D7; --cc-border-strong:#D8CEC0; --cc-text:#1A1611; --cc-text-2:#463D31; --cc-muted:#827665; --cc-primary:#9C5B14; --cc-primary-hover:#7E480D; --cc-primary-soft:#F7ECDE; --cc-primary-line:#DFBB8B; --cc-success:#4A6B18; --cc-success-soft:#EDF2E1; --cc-accent:#8A6A11; --cc-accent-soft:#F6F0DC; --cc-danger:#A33320; --cc-danger-soft:#F8E9E5; } /* 5. Indigo — desaturated indigo, cool white ground. */ :root[data-theme="indigo"] { --cc-bg:#FAFAFD; --cc-surface:#FFFFFF; --cc-surface-sunk:#F2F3F9; --cc-border:#E4E6F0; --cc-border-strong:#D2D5E5; --cc-text:#12141F; --cc-text-2:#383D52; --cc-muted:#71768C; --cc-primary:#3A44A0; --cc-primary-hover:#2C3480; --cc-primary-soft:#EBEDF9; --cc-primary-line:#B3B9E4; --cc-success:#0F6B52; --cc-success-soft:#E3F1EC; --cc-accent:#8A5C1B; --cc-accent-soft:#F6EEE2; --cc-danger:#AC2436; --cc-danger-soft:#F9E8EA; } /* 6. Zanzibar — bright aqua, high-key and airy. */ :root[data-theme="zanzibar"] { --cc-bg:#F6FBFB; --cc-surface:#FFFFFF; --cc-surface-sunk:#EAF4F5; --cc-border:#DBEAEC; --cc-border-strong:#C3DCDF; --cc-text:#0C1819; --cc-text-2:#2E4446; --cc-muted:#638083; --cc-primary:#00757F; --cc-primary-hover:#005C64; --cc-primary-soft:#DFF1F2; --cc-primary-line:#96D0D5; --cc-success:#0B6B57; --cc-success-soft:#E1F1ED; --cc-accent:#96650F; --cc-accent-soft:#F7F0DE; --cc-danger:#AC2A2A; --cc-danger-soft:#F9E9E9; } /* 7. Copper — bronze accent, faintly warm neutrals. */ :root[data-theme="copper"] { --cc-bg:#FBF9F8; --cc-surface:#FFFFFF; --cc-surface-sunk:#F4F0ED; --cc-border:#E9E2DE; --cc-border-strong:#D8CEC8; --cc-text:#1A1512; --cc-text-2:#453B35; --cc-muted:#80736C; --cc-primary:#9A5231; --cc-primary-hover:#7C4026; --cc-primary-soft:#F7EBE5; --cc-primary-line:#DFB69F; --cc-success:#3F6B33; --cc-success-soft:#EAF2E7; --cc-accent:#8B6414; --cc-accent-soft:#F6EFDE; --cc-danger:#A82E24; --cc-danger-soft:#F8E9E7; } /* 8. Rosewood — muted rose, quiet and low-contrast-warm. */ :root[data-theme="rosewood"] { --cc-bg:#FDF9FA; --cc-surface:#FFFFFF; --cc-surface-sunk:#F7EFF2; --cc-border:#EEE1E6; --cc-border-strong:#DECCD3; --cc-text:#1B1216; --cc-text-2:#493840; --cc-muted:#867079; --cc-primary:#96305A; --cc-primary-hover:#7A2448; --cc-primary-soft:#F8E8EF; --cc-primary-line:#E0AEC5; --cc-success:#166B52; --cc-success-soft:#E4F1ED; --cc-accent:#8B5E17; --cc-accent-soft:#F6EFE0; --cc-danger:#AB2530; --cc-danger-soft:#F9E8E9; } /* ----------------------------------------------------------------- DARK --- */ /* Dark grounds are never pure black: a slight hue lift stops large panels looking like holes, and keeps 1px borders visible. */ /* 9. Midnight — deep navy, cyan accent. */ :root[data-theme="midnight"] { --cc-bg:#0C1119; --cc-surface:#131A25; --cc-surface-strong:#131A25; --cc-surface-sunk:#0F1620; --cc-border:#222C3B; --cc-border-strong:#2E3A4C; --cc-text:#EAEFF7; --cc-text-2:#B7C2D2; --cc-muted:#7E8CA0; --cc-primary:#35B6C9; --cc-primary-hover:#4FCADC; --cc-primary-soft:#152A31; --cc-primary-line:#2B5A64; --cc-success:#3FBE8C; --cc-success-soft:#132A22; --cc-accent:#D9A441; --cc-accent-soft:#2B2317; --cc-danger:#F0616C; --cc-danger-soft:#2E1619; --cc-shadow:0 1px 2px rgba(0,0,0,.4); } /* 10. Obsidian — near-black, warm amber accent. */ :root[data-theme="obsidian"] { --cc-bg:#0D0D0F; --cc-surface:#151517; --cc-surface-strong:#151517; --cc-surface-sunk:#101012; --cc-border:#242427; --cc-border-strong:#323236; --cc-text:#F0EFED; --cc-text-2:#BFBDB8; --cc-muted:#87857F; --cc-primary:#E0A33C; --cc-primary-hover:#EFB755; --cc-primary-soft:#2A2216; --cc-primary-line:#5C4A24; --cc-success:#57BC7F; --cc-success-soft:#152318; --cc-accent:#D89A3A; --cc-accent-soft:#2A2216; --cc-danger:#EC6A5E; --cc-danger-soft:#2B1715; --cc-shadow:0 1px 2px rgba(0,0,0,.5); } /* 11. Evergreen — dark green-black, mint accent. */ :root[data-theme="evergreen"] { --cc-bg:#0A1210; --cc-surface:#111B18; --cc-surface-strong:#111B18; --cc-surface-sunk:#0D1614; --cc-border:#1E2C28; --cc-border-strong:#2B3D37; --cc-text:#E8F2EE; --cc-text-2:#B2C6BF; --cc-muted:#7C918B; --cc-primary:#4CC49A; --cc-primary-hover:#65D6AE; --cc-primary-soft:#122A22; --cc-primary-line:#2A5A48; --cc-success:#4CC49A; --cc-success-soft:#122A22; --cc-accent:#D2A64A; --cc-accent-soft:#292216; --cc-danger:#EE6B6B; --cc-danger-soft:#2C1818; --cc-shadow:0 1px 2px rgba(0,0,0,.45); } /* 12. Plum — dark aubergine, magenta accent. */ :root[data-theme="plum"] { --cc-bg:#120C16; --cc-surface:#1B1320; --cc-surface-strong:#1B1320; --cc-surface-sunk:#160F1A; --cc-border:#2B2033; --cc-border-strong:#3A2C44; --cc-text:#F0EAF4; --cc-text-2:#C4B6CC; --cc-muted:#8D7E96; --cc-primary:#C56FC0; --cc-primary-hover:#D688D1; --cc-primary-soft:#2A1A2A; --cc-primary-line:#5B3859; --cc-success:#52BE93; --cc-success-soft:#14261F; --cc-accent:#D3A44C; --cc-accent-soft:#2A2318; --cc-danger:#EE6377; --cc-danger-soft:#2D161C; --cc-shadow:0 1px 2px rgba(0,0,0,.45); } /* 13. Slate — cool blue-grey dark, ice-blue accent. Lowest contrast of the dark set; easiest on the eyes for a full shift. */ :root[data-theme="slate"] { --cc-bg:#12161C; --cc-surface:#1A2027; --cc-surface-strong:#1A2027; --cc-surface-sunk:#161B22; --cc-border:#28303A; --cc-border-strong:#36404C; --cc-text:#E9EDF2; --cc-text-2:#B6BFCA; --cc-muted:#828D9A; --cc-primary:#7FA9D8; --cc-primary-hover:#98BCE5; --cc-primary-soft:#1B2733; --cc-primary-line:#3C5670; --cc-success:#5FBF92; --cc-success-soft:#16261F; --cc-accent:#D4A55A; --cc-accent-soft:#28221A; --cc-danger:#E97080; --cc-danger-soft:#2A171B; --cc-shadow:0 1px 2px rgba(0,0,0,.45); } /* ------------------------------------------------ legacy-colour compat ---- */ /* Much of this app predates the token system and hard-codes Tailwind-era greys in inline style attributes. On a dark ground those become white cards and black text - unreadable. Substring-match the handful that actually occur and pull them back onto the palette. Light themes need none of this. */ :root[data-mode="dark"] [style*="background:#fff"], :root[data-mode="dark"] [style*="background: #fff"], :root[data-mode="dark"] [style*="background:#ffffff"], :root[data-mode="dark"] [style*="background:#f9fafb"], :root[data-mode="dark"] [style*="background:#f8fafc"], :root[data-mode="dark"] [style*="background:#f3f4f6"], :root[data-mode="dark"] [style*="background:#f1f5f9"] { background: var(--cc-surface-sunk) !important; } :root[data-mode="dark"] [style*="color:#374151"], :root[data-mode="dark"] [style*="color:#111827"], :root[data-mode="dark"] [style*="color:#0f172a"], :root[data-mode="dark"] [style*="color:#1f2937"] { color: var(--cc-text) !important; } :root[data-mode="dark"] [style*="color:#6b7280"], :root[data-mode="dark"] [style*="color:#9ca3af"], :root[data-mode="dark"] [style*="color:#64748b"] { color: var(--cc-muted) !important; } :root[data-mode="dark"] [style*="#d1d5db"], :root[data-mode="dark"] [style*="#e5e7eb"], :root[data-mode="dark"] [style*="#f3f4f6"] { border-color: var(--cc-border) !important; } /* Inputs and selects carry their own inline borders and white backgrounds. */ :root[data-mode="dark"] input, :root[data-mode="dark"] select, :root[data-mode="dark"] textarea { background: var(--cc-surface-sunk) !important; color: var(--cc-text) !important; border-color: var(--cc-border-strong) !important; } :root[data-mode="dark"] input::placeholder, :root[data-mode="dark"] textarea::placeholder { color: var(--cc-muted) !important; } :root[data-mode="dark"] .modal-content { background: var(--cc-surface); color: var(--cc-text); } :root[data-mode="dark"] .cc-panel { background: var(--cc-surface); } /* The amber pause strip and the queue strip are hand-tinted; dim them so they read as an accent rather than a floodlight. */ :root[data-mode="dark"] #cc-pause-bar, :root[data-mode="dark"] #cc-waiting-calls { background: var(--cc-accent-soft) !important; } /* ----------------------------------------------------------- the dots ---- */ .cc-theme-dots { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 12px 14px; margin-top: auto; border-top: 1px solid var(--cc-border); } .cc-theme-dots-label { width: 100%; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 2px; } .cc-theme-dot { width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .18); padding: 0; cursor: pointer; position: relative; transition: transform .12s ease; } .cc-theme-dot:hover { transform: scale(1.18); } .cc-theme-dot:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; } /* Active gets a ring rather than a tick - a tick inside 16px is mud. */ .cc-theme-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cc-surface), 0 0 0 3.5px var(--cc-primary); } @media (prefers-reduced-motion: reduce) { .cc-theme-dot { transition: none; } }