/* Vendla design tokens — import once, use everywhere. Also aliased to Bootstrap/Phoenix vars below. */
/* Fonts: add to :
*/
:root {
--vendla-amber: #E8890C;
--vendla-ink: #1E2A38;
--vendla-sand: #F6EFE6;
--vendla-green: #1FA97A; /* functional only */
--vendla-pink: #E4577E; /* functional only */
--vendla-white: #FFFFFF;
--vendla-ink-60: #5A6673;
--vendla-font-heading: 'Bricolage Grotesque', Arial, sans-serif;
--vendla-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--vendla-font-chat: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--vendla-radius-sm: 8px; --vendla-radius-md: 12px; --vendla-radius-lg: 18px; --vendla-radius-pill: 999px;
--vendla-shadow-card: 0 1px 4px rgba(30,42,56,.08);
/* --- Bootstrap 5 / Phoenix variable aliases (so components pick up the brand automatically) --- */
--bs-primary: #E8890C;
--bs-primary-rgb: 232,137,12;
--bs-dark: #1E2A38;
--bs-body-color: #1E2A38;
--bs-body-bg: #FFFFFF;
--bs-success: #1FA97A;
--bs-danger: #E4577E;
--bs-body-font-family: var(--vendla-font-body);
--bs-border-radius: 12px;
--phoenix-primary: #E8890C; /* Phoenix theme alias */
--phoenix-body-color: #1E2A38;
}
h1,h2,h3,h4,.h1,.h2,.h3,.navbar-brand { font-family: var(--vendla-font-heading); letter-spacing:-.01em; }
body { font-family: var(--vendla-font-body); color: var(--vendla-ink); }
.btn-primary { --bs-btn-bg: var(--vendla-amber); --bs-btn-border-color: var(--vendla-amber); --bs-btn-hover-bg:#cf7a08; --bs-btn-hover-border-color:#cf7a08; --bs-btn-color:#fff; }
.text-amber{color:var(--vendla-amber)!important;} .bg-sand{background:var(--vendla-sand)!important;} .bg-ink{background:var(--vendla-ink)!important;}