/* ========================================================= DESIGN TOKENS Everything the chatbot looks like is driven by these CSS custom properties. Change them here, in the UI panel, or via JS (see script.js -> applyTokens()). COLORS: aliased from the semantic color system in `colors.css` (import it before this file). Set a theme via . ========================================================= */ /* ---------- Brand font: Volvo Centum (variable) ---------- Single variable face so the weight (wght) axis works and `font-weight` is honoured. `format("woff2")` lets modern browsers auto-detect the variable axes. -------------------------------------------------------- */ @font-face { font-family: "Volvo Centum"; src: url("fonts/VolvoCentumOpszVF_W_DrkmOpszWghtItal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Color palette — mapped to semantic color tokens */ --color-bg: var(--elevation-raise, #eef1f6); --color-surface: var(--elevation-overlay, #ffffff); --color-header: var(--fg-always_white, #ffffff); /* Bubbles */ --bubble-bot-bg: var(--elevation-overlay, #f0f2f5); --bubble-bot-text: var(--fg-primary, #1c1e21); --bubble-user-bg: var(--elevation-highlight-neutral, #101014); --bubble-user-text: var(--fg-inverted, #ffffff); /* Action button inside rich messages */ --action-bg: var(--state-primary-subtle, rgba(0, 0, 0, 0.06)); --action-text: var(--fg-primary, #1c1e21); /* Thinking / loading state */ --thinking-bg: var(--elevation-overlay, #f0f2f5); --thinking-text: var(--fg-primary, #1c1e21); --thinking-track: var(--state-primary-medium, rgba(0, 0, 0, 0.15)); --thinking-accent: var(--fg-primary, #1c1e21); /* Composer (message input) */ --composer-bg: var(--fg-always_white, #ffffff); --composer-border: var(--state-primary-subtle, rgba(0, 0, 0, 0.08)); --composer-text: var(--fg-primary, #1c1e21); --composer-placeholder: var(--fg-tertiary, #9aa1ad); --composer-font-size: 15px; --send-bg-idle: var(--elevation-highlight-gray, #c7c9cc); --send-icon-idle: var(--fg-always_white, #ffffff); --send-bg-active: var(--elevation-highlight-neutral, #101014); --send-icon-active: var(--fg-inverted, #ffffff); /* Accents */ --color-accent: var(--elevation-highlight-accent_blue, #4f7cff); --color-accent-contrast: var(--fg-always_white, #ffffff); --color-status: #22c55e; /* Typography */ --font-family: "Volvo Centum", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-msg: 16px; --line-height-msg: 24px; --font-size-heading: 20px; --line-height-heading: 28px; --font-size-name: 15px; --line-height: 1.4; /* Shape & spacing */ --radius-bubble: 18px; --radius-device: 28px; --space-bubble-x: 14px; --space-bubble-y: 10px; --gap-messages: 20px; --gap-messages-grouped: 4px; /* Motion */ --anim-enter-ms: 320ms; --anim-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Elevation */ --shadow-device: 0 30px 60px -20px rgba(0, 0, 0, 0.4); --shadow-bubble: 0 1px 1px rgba(0, 0, 0, 0.06); }