/* ===================================================================== Samtalsassistenten – design tokens & palettes Ported from the "SA Demo UI" mockup. :root is palette 1 (Kommun); [data-pal] on switches palettes. The active palette is set pre-render by the inline script in index.html (localStorage 'sca-theme'). ===================================================================== */ /* ===== Palette 1 — Skärgård (blue) ===== */ :root { --app-bg: #eef2f7; --card: #ffffff; --inset: #e6ecf3; --border: #dde5ee; --brand-border: #bcd4ee; --track-off: #c9d3df; --ink: #16202b; --ink-mid: #36414f; --ink-soft: #5b6675; --ink-faint: #636e7e; /* darkened for WCAG 1.4.3 (>=4.5:1 on light surfaces) */ --brand: #1b5fb0; --brand-tint: #e2edf9; --brand-shadow: rgba(27, 95, 176, .28); --side-bg: #10325e; --side-ink: rgba(255, 255, 255, .95); --side-dim: rgba(255, 255, 255, .85); /* soft near-white, WCAG 1.4.3: ~9.6:1 (was ~5.8:1) */ --side-surface: rgba(255, 255, 255, .08); --side-line: rgba(255, 255, 255, .13); --side-accent: #6db8f0; --side-accent-tint: rgba(109, 184, 240, .2); --warn: #8a6a16; --warn-tint: #f3e8cb; --warn-bg: #fbf3df; --warn-border: #ecdcae; --danger: #b23b2e; --danger-bg: #fbe9e7; --danger-border: #f2d2cd; --danger-tint: rgba(178, 59, 46, .10); --rec: #e0574b; --role-assist: #4f63c4; --role-assist-tint: rgba(79, 99, 196, .13); --scroll: #cdd8e5; /* typography — single typeface (Instrument Sans). --font-head kept as an alias so the .sca-head headings can stay tokenised. */ --font-body: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-head: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* elevation & shape — soft, layered ambient shadows so surfaces read as depth, not boxes */ --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -12px rgba(16, 24, 40, .14); --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 40px -16px rgba(16, 24, 40, .22); --radius-card: 18px; } /* ===== Palette 2 — Fjällen (quiet, near-monochrome) ===== */ [data-pal="2"] { --app-bg: #f4f4f3; --inset: #ececeb; --border: #e5e5e3; --brand-border: #d1d2cf; --track-off: #d3d4d2; --ink: #1b1c1b; --ink-mid: #3b3d3b; --ink-soft: #62645f; --ink-faint: #6c6d69; /* darkened for WCAG 1.4.3 (>=4.5:1 on light surfaces) */ --brand: #3a3d3b; --brand-tint: #ececeb; --brand-shadow: rgba(40, 42, 40, .22); --side-bg: #2b2d2b; --side-ink: rgba(255, 255, 255, .92); --side-dim: rgba(255, 255, 255, .85); /* soft near-white, WCAG 1.4.3: ~10.5:1 (was ~5.3:1) */ --side-surface: rgba(255, 255, 255, .06); --side-line: rgba(255, 255, 255, .1); --side-accent: #c1c3bf; --side-accent-tint: rgba(193, 195, 191, .18); --scroll: #dadad8; } /* ===== Palette 3 — Hösten (warm, bold sunset) ===== */ [data-pal="3"] { --app-bg: #f7f0e6; --card: #fffdf9; --inset: #f1e8d9; --border: #ecdfcc; --brand-border: #f0c9b0; --track-off: #ddd0bc; --ink: #241a14; --ink-mid: #473a2c; --ink-soft: #6f6049; --ink-faint: #766850; /* darkened for WCAG 1.4.3 (>=4.5:1 on light surfaces) */ --brand: #b0451a; /* darkened for WCAG 1.4.3 (>=4.5:1 for links & white button text) */ --brand-tint: #fae5d8; --brand-shadow: rgba(176, 69, 26, .30); --side-bg: #3b2233; --side-ink: rgba(255, 250, 246, .96); --side-dim: rgba(255, 247, 240, .85); /* soft near-white, WCAG 1.4.3: ~10.2:1 (was ~6:1) */ --side-surface: rgba(255, 240, 230, .08); --side-line: rgba(255, 235, 222, .14); --side-accent: #f4b24a; --side-accent-tint: rgba(244, 178, 74, .2); --warn: #8a5e0f; /* darkened for WCAG 1.4.3 (>=4.5:1 on warn-bg) */ --warn-tint: #f5e6c4; --warn-bg: #fbf0d6; --warn-border: #edd6a4; --rec: #d9492f; --scroll: #e2d6c2; } /* ===== Palette 4 — Havet (cool, fresh cyan-teal) : default ===== */ [data-pal="4"] { --app-bg: #eef3f4; --inset: #e6eded; --border: #dde7e7; --brand-border: #b6e0df; --track-off: #cad6d6; --ink: #14201f; --ink-mid: #343f3f; --ink-soft: #5b6766; --ink-faint: #62706f; /* darkened for WCAG 1.4.3 (>=4.5:1 on light surfaces) */ --brand: #077474; /* darkened for WCAG 1.4.3 (>=4.5:1 for links & white button text) */ --brand-tint: #def1f1; --brand-shadow: rgba(7, 116, 116, .26); --side-bg: #0f3a40; --side-accent: #5fe3d8; --side-accent-tint: rgba(95, 227, 216, .18); --scroll: #d2dcdc; } /* ===== Shared animations ===== */ @keyframes scaPulse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } @keyframes scaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes scaSpin { to { transform: rotate(360deg); } } @keyframes scaPing { 0% { transform: scale(.7); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } } @keyframes scaPop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } } /* Suppress transitions briefly while switching palette (set by themeInterop) */ [data-switching] * { transition: none !important; } /* ===== Tokenized base + scrollbar ===== */ html, body { background-color: var(--app-bg); font-family: var(--font-body); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; } /* Heading font helper */ .sca-head { font-family: var(--font-head); letter-spacing: -.01em; }