/* ══════════════════════════════════════════════════════════════ SVS MSP Calculator — Light Theme Phase 5 reduces this file to token overrides only so the light mode stays aligned with the shared product system. ══════════════════════════════════════════════════════════════ */ :root { --ink: #2c2825; --paper: #e2dccf; --accent: #637f88; --muted: #6a6157; --border: #c3baab; --border-soft: #cdc6ba; --card: #ece4d6; --green: #217045; --amber: #a05f00; --sky: #0e7490; --focus-ring-soft: rgba(99, 127, 136, 0.16); --top-bar-bg: #d9d0c1; --top-bar-border: rgba(0, 0, 0, 0.09); --top-bar-meta: var(--muted); --theme-chip-bg: rgba(67, 57, 50, 0.08); --theme-chip-hover: rgba(67, 57, 50, 0.13); --theme-chip-active: rgba(67, 57, 50, 0.18); --theme-chip-fg: #2a2622; --surface-section: #eee6d8; --surface-feature: #e6ddd0; --surface-settings: #e3d7c4; --surface-settings-divider: #c8bcab; --surface-input: #f1eadf; --surface-term-wrap: var(--card); --surface-term-tile: rgba(255, 255, 255, 0.04); --surface-term-tile-hover: rgba(99, 127, 136, 0.06); --surface-term-tile-active: linear-gradient(180deg, #829ea8 0%, #667f89 100%); --border-term-wrap: #cabdaa; --border-term-tile-active: rgba(82, 107, 116, 0.24); --shadow-term-wrap: inset 0 1px 0 rgba(255,255,255,0.34); --shadow-term-tile-active: inset 0 1px 0 rgba(255,255,255,0.18); --text-term-name: #64594e; --text-term-name-active: #f8f5ef; --text-term-sub: #4d433a; --text-term-sub-active: var(--text-term-name-active); --text-term-discount: #2f2a25; --text-term-discount-active: #ffffff; --surface-best-value: rgba(86, 146, 105, 0.12); --border-best-value: rgba(86, 146, 105, 0.3); --text-best-value: #35554a; --surface-best-value-active: rgba(255, 255, 255, 0.18); --border-best-value-active: rgba(255, 255, 255, 0.36); --text-best-value-active: #ffffff; --surface-sidebar: #e0dad1; --surface-sidebar-header: #769aaa; --surface-sidebar-body: #ebe5dd; --surface-sidebar-utility: #d8d1c7; --surface-export: #ddd6cd; --surface-compare: var(--surface-export); --surface-modal: var(--surface-input); --surface-mobile-sheet: #e5dfd6; --surface-mobile-close-row: #dbd4cb; --surface-mobile-actions: var(--surface-mobile-close-row); --surface-mobile-sidebar: transparent; --surface-accent-soft: rgba(99, 127, 136, 0.09); --surface-summary-badge: rgba(99, 127, 136, 0.09); --border-summary-badge: rgba(99, 127, 136, 0.23); --surface-chevron: rgba(58, 50, 43, 0.04); --surface-chevron-active: rgba(58, 50, 43, 0.075); --surface-ghost: rgba(58, 50, 43, 0.06); --surface-ghost-hover: rgba(58, 50, 43, 0.1); --surface-step: var(--surface-input); --surface-step-hover: #e5dbcc; --surface-step-active: var(--accent); --surface-step-border: #a99e8f; --text-step: var(--accent); --surface-success: #e6f2e9; --surface-success-border: #8fb69d; --surface-danger: #f7e8ea; --surface-danger-border: #d5a1ab; --text-danger: #7a1520; --surface-warning: #f7f0dd; --surface-warning-panel: var(--surface-warning); --surface-warning-border: #ddc39b; --surface-compare-success: rgba(86, 146, 105, 0.12); --surface-compare-warning: rgba(179, 133, 72, 0.11); --surface-selected: #d6e0e1; --surface-addon-hover: #dde2de; --border-addon-hover: #b0bcc0; --text-selected-accent: #264b5d; --text-sidebar-kicker: rgba(248, 245, 239, 0.84); --text-sidebar-heading: #fbf8f3; --text-sidebar-placeholder: rgba(248, 245, 239, 0.76); --text-money: var(--ink); --text-money-hero: var(--ink); --text-vs-heading: var(--ink); --text-vs-accent: var(--accent); --text-vs-muted: var(--muted); --text-incentive: #35554a; --text-pill-savings-active: #d4f5e0; --group-strip: rgba(99, 127, 136, 0.18); --section-hover-border: rgba(99, 127, 136, 0.18); --section-hover-shadow: -3px 0 0 0 rgba(99, 127, 136, 0.18); --section-open-border: rgba(99, 127, 136, 0.27); --section-open-shadow: -3px 0 0 0 rgba(99, 127, 136, 0.3); --surface-mobile-close-btn: rgba(61, 53, 46, 0.07); --surface-mobile-close-btn-active: rgba(61, 53, 46, 0.12); --btn-primary-fg: #fbf8f3; --btn-primary-hover: #59737c; --surface-pill-icon: rgba(255, 255, 255, 0.18); --border-sidebar: #c6beb3; --surface-sidebar-utility-border: #bfb7ad; --border-compare: var(--border-sidebar); --border-export-top: #ccc4ba; --border-mobile-sheet: var(--border-sidebar); --border-mobile-row: var(--border-export-top); --sidebar-zone-services: rgba(0, 0, 0, 0.03); --sidebar-zone-invoice: rgba(0, 0, 0, 0.05); --sidebar-zone-value: rgba(33, 112, 69, 0.04); --sidebar-zone-summary: rgba(0, 0, 0, 0.02); --sidebar-row-stripe: rgba(0, 0, 0, 0.02); --sidebar-line-rule: color-mix(in srgb, var(--border) 70%, transparent); --sidebar-total-rule: color-mix(in srgb, var(--border) 90%, transparent); --surface-switch-off: #b5ad9f; --surface-switch-on: var(--green); } .btn-import-quote:hover { background: color-mix(in srgb, var(--sky) 8%, transparent); border-color: color-mix(in srgb, var(--sky) 35%, transparent); color: var(--sky); }