John OReilly
4c53af96a9
- Unify sidebar dividers: one dashed style + --sidebar-rule token (replaces 4 old tokens) - Remove total-line border from invoice/value/summary groups (keep monthly only) - Add --text-spacing-money: 0.05em token (was hardcoded 0.02em) for price readability - Bump 6 font sizes from 8-10px to 0.6875rem (11px minimum floor) - Darken --muted: Dark #9e9588→#b0a99f (6.6:1), Light #6a6157→#554e46 (6.5:1) - Remove opacity on 9 text elements that were double-muting with --muted color - Normalize divider weight across themes: Dark/Light 75%, Glass 0.16 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
132 lines
5.4 KiB
CSS
132 lines
5.4 KiB
CSS
/* ══════════════════════════════════════════════════════════════
|
|
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: #554e46;
|
|
--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: color-mix(in srgb, var(--accent) 18%, var(--paper));
|
|
--shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
|
|
--shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
|
|
--shadow-card-open: 0 6px 20px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
|
|
--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.04);
|
|
--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-rule: color-mix(in srgb, var(--border) 75%, 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);
|
|
}
|