/* ============================================================================ * Sol Dialer — Saffron Theme (v2) * Activated via: * Source: C:/Users/elira/Downloads/sol-dialer-v2/saffron-dialer-tokens.css * Reference: sol-dialer-v2/Sol Dialer - Component Library.html * * ── ISOLATION CONTRACT ────────────────────────────────────────────────────── * Every single rule in this file is gated by [data-theme="saffron"]. * • When data-theme attribute is absent (default state) — this file is INERT. * • The original :root in dialer.css applies, the default Sol Classic theme * renders unchanged at the byte level. Zero leak. * • Removing the attribute (Settings toggle → "סול קלאסי") restores default * instantly without a page reload. * * NEVER lift any rule in this file out of [data-theme="saffron"] selector * and into :root. That single change would break the isolation contract and * silently apply Saffron to users on the default theme. * * ── STRATEGY ──────────────────────────────────────────────────────────────── * The Saffron handoff (saffron-dialer-tokens.css) used a NEW token vocabulary * (--surface-*, --state-*, --saffron-*) that does NOT match dialer.css. * Rather than rewriting every component rule in dialer.css (high risk of * regression on the default theme), this file does TWO things: * * 1. OVERRIDE the existing dialer.css token names (--bg, --primary, --ink, * --missed, etc.) with Saffron-equivalent values. Existing components in * dialer.css automatically pick up the new colours via var() lookup. * * 2. PUBLISH the new Saffron token names (--saffron-400, --state-success, * --wa-sent-bg, etc.) for future components built explicitly for Saffron. * These are inert until referenced by a component. * * ── 7 IRON RULES ──────────────────────────────────────────────────────────── * 1 efficiency: single CSS file, cacheable, ~10KB raw, no runtime cost * 2 stability: additive only, default theme byte-identical when inactive * 3 speed: no @import (avoids extra round-trip), no @media-heavy * 4 security: no url(), no @import http, CSP-safe (style-src 'self') * 5 innovation: attribute-based theming extends naturally to dark/density * 6 robustness: every dialer.css token name is overridden — no half-state * 7 scalability: second theme is one new attribute value away * ========================================================================= */ [data-theme="saffron"] { /* ---------- Surfaces (saffron values, dialer.css names) -------------- */ --bg: #FAF7F2; /* page bg — same as default */ --bg-elev: #FFFFFF; /* card surface — same */ --bg-inset: #F5F0E8; /* shifted to saffron muted */ --bg-inset-2: #EDE6D7; /* shifted to saffron border*/ --bg-glass: rgba(250, 247, 242, 0.78); /* same */ /* ---------- Lines (warmer hairline tint) ----------------------------- */ --hairline: rgba(42, 36, 24, 0.07); --hairline-strong: rgba(42, 36, 24, 0.13); --border: #DDD2BC; /* saffron border-default */ /* ---------- Ink (saffron text palette) ------------------------------- */ --ink: #2A2418; /* saffron text-primary */ --ink-2: #6B5F4D; /* saffron text-secondary */ --ink-3: #9A8F7E; /* saffron text-muted */ --phone-ink: #1B1611; /* near-black, saffron tint */ /* ---------- Brand: BROWN → SAFFRON-GOLD (the marquee change) -------- */ --primary: #D9A441; /* saffron-400 */ --primary-hover: #C29031; /* saffron-500 */ --primary-ink: #7A5D1F; /* saffron-700 */ --primary-soft: #FAF1DA; /* saffron-100 */ --primary-softer: #FDF9EC; /* saffron-50 */ --primary-glow: rgba(217, 164, 65, 0.18); /* ---------- Status (saffron-refreshed; preserved meaning) ----------- */ --missed: #B8463C; --missed-soft: #FAEAE6; --missed-ink: #7A2E27; --answered: #4A8B5C; --answered-soft:#E6F1E8; --answered-ink: #2D5938; --pending: #6B5BA3; --pending-soft: #ECE8F4; --pending-ink: #3F3568; /* ---------- AI lead temperature (refreshed warm/cold) --------------- */ --hot: #D6695E; /* warmer red */ --hot-soft: #FAEAE6; --hot-ink: #7A2E27; --warm: #C4923A; /* saffron warning */ --warm-soft: #FBF1DC; --warm-ink: #7C5A1E; --cold: #6B7B8E; /* cooler greyish */ --cold-soft: #E8EEF5; --cold-ink: #3F5A7A; /* ---------- Roles (saffron palette, dialer.css names) --------------- */ --role-owner: #C4923A; /* saffron warning */ --role-admin: #6B5BA3; /* purple */ --role-agent: #5C8B7A; /* sage */ --role-viewer: #9A8F7E; /* warm grey */ /* ---------- Shadows (saffron-tinted neutral) ------------------------ */ --sh-1: 0 1px 2px rgba(42, 36, 24, 0.04), 0 1px 1px rgba(42, 36, 24, 0.03); --sh-2: 0 2px 6px rgba(42, 36, 24, 0.05), 0 1px 2px rgba(42, 36, 24, 0.04); --sh-3: 0 8px 24px rgba(42, 36, 24, 0.08), 0 2px 4px rgba(42, 36, 24, 0.04); --sh-4: 0 24px 64px rgba(42, 36, 24, 0.16), 0 8px 16px rgba(42, 36, 24, 0.06); /* (Radii, fonts, motion: kept identical to default — no override needed) */ /* ============================================================================ * NEW SAFFRON-ONLY TOKENS (saffron handoff vocabulary) * Inert under default theme. Available to any future component that opts in. * ========================================================================= */ /* Saffron palette */ --saffron-50: #FDF9EC; --saffron-100: #FAF1DA; --saffron-200: #F2DFA8; --saffron-300: #E5C36A; --saffron-400: #D9A441; --saffron-500: #C29031; --saffron-600: #A47723; --saffron-700: #7A5D1F; --saffron-800: #4D3A12; --saffron-glow: rgba(217, 164, 65, 0.18); --saffron-shadow: 0 1px 0 rgba(122, 93, 31, 0.08), 0 2px 8px rgba(217, 164, 65, 0.12); /* Surface tokens (saffron handoff names) */ --surface-page: #FAF7F2; --surface-card: #FFFFFF; --surface-elevated: #FFFFFF; --surface-overlay: rgba(40, 32, 20, 0.55); --surface-muted: #F5F0E8; --surface-tint: #FDF9EC; /* Row tints — VERY subtle (1-2% saturation) */ --row-tint-missed: #FCF3F0; --row-tint-own: #F4F1F8; --row-tint-active: #F0F7F2; /* Text tokens (saffron handoff names) */ --text-primary: #2A2418; --text-secondary: #6B5F4D; --text-muted: #9A8F7E; --text-disabled: #C2BAA8; --text-on-saffron: #2A2418; --text-on-dark: #FAF7F2; /* Border tokens (saffron handoff names) */ --border-subtle: #EDE6D7; --border-default: #DDD2BC; --border-strong: #B8A98C; --border-focus: #D9A441; /* State tokens (saffron handoff names) */ --state-success: #4A8B5C; --state-success-soft: #E6F1E8; --state-success-ink: #2D5938; --state-success-stripe: #6BA67C; --state-danger: #B8463C; --state-danger-soft: #FAEAE6; --state-danger-ink: #7A2E27; --state-danger-stripe: #D6695E; --state-warning: #C4923A; --state-warning-soft: #FBF1DC; --state-warning-ink: #7C5A1E; --state-info: #6B5BA3; --state-info-soft: #ECE8F4; --state-info-ink: #3F3568; --state-info-stripe: #8E7FC2; --state-neutral: #6B5F4D; --state-neutral-soft: #EDE6D7; --state-neutral-ink: #2A2418; --state-callback: #5C8B7A; --state-callback-soft: #E0EEE7; --state-callback-ink: #2D5946; /* WhatsApp pill states (6 states) */ --wa-idle-bg: #ECE8F4; --wa-idle-ink: #5C4F8A; --wa-draft-bg: #FBF1DC; --wa-draft-ink: #7C5A1E; --wa-queued-bg: #E8EEF5; --wa-queued-ink: #3F5A7A; --wa-sending-bg: #FFF4D6; --wa-sending-ink: #7A5D1F; --wa-sent-bg: #E0EEE7; --wa-sent-ink: #2D5946; --wa-failed-bg: #FAEAE6; --wa-failed-ink: #7A2E27; --wa-brand: #25D366; /* Source corner badges (8 sources) */ --src-rrr: #8E7FC2; --src-rrr-bg: #ECE8F4; --src-tzimertop: #C29031; --src-tzimertop-bg: #FAF1DA; --src-heyukra: #5C8B7A; --src-heyukra-bg: #E0EEE7; --src-sol: #D9A441; --src-sol-bg: #FDF9EC; --src-direct: #6B5F4D; --src-direct-bg: #EDE6D7; --src-zimertop: #B8463C; --src-zimertop-bg: #FAEAE6; --src-google-card: #4285F4; --src-google-card-bg: #E8EEF5; --src-private-site: #4A8B5C; --src-private-site-bg: #E6F1E8; } /* ============================================================================ * BODY GRADIENT REFRESH * The default body has a brown radial gradient. Replace with saffron tints * but ONLY when [data-theme="saffron"] is active. This is the only ruleset * in this file that targets a real element rather than a custom property. * ========================================================================== */ [data-theme="saffron"] body { background: radial-gradient(1200px 600px at 100% -10%, rgba(217, 164, 65, 0.06), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(196, 146, 58, 0.05), transparent 55%), var(--bg); }