/* ============================================================================
VOX — Harmonisation layer
Load this AFTER app.css (one in base.html). It re-skins the app to the
cleaned design system WITHOUT touching the 3 700-line app.css:
· refined amber / ink / warm-stone palette (overrides the :root vars)
· two-font system — Barlow body, Oswald display
· lighter shadows (heavy 0 4px 12px /.15 → real elevation only)
· calmer inputs (weight moves from a 3px resting border to the focus ring)
· Lucide icon sizing (replaces the emoji glyphs)
To roll back: remove the . Nothing else changes.
============================================================================ */
/* ---- Fonts: add Barlow (Oswald already imported by app.css) -------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* ---- Global type up-scale +20% (app.css uses rem everywhere) ------------- */
html { font-size: 19.2px; }
/* ---- Compact bubbles: counter the +20% text growth and trim 20% on top --- */
.quote-card { position: relative; padding: 6px 120px 6px 16px; }
.quote-card__header { margin-bottom: 0; }
.quote-card__client { margin-bottom: 2px; }
.quote-card__actions {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.line-item { padding: 4px 14px; }
.catalog-item__view { padding: 0.3rem 0.75rem; }
.card { padding: 6px 16px; }
.card__content { padding: 2px 0; gap: 4px; }
/* ---- Palette override (same variable names app.css already uses) --------- */
:root {
--color-bg: #DBD3C1; /* cleaned warm canvas (was #C9BDA3) */
--color-header: #16160F; /* ink (was #1a1a1a) */
--color-header-text: #D9A227; /* amber-400 */
--color-accent: #C9971D; /* refined amber (was #D4A017) */
--color-accent-light: #FBF3DA;
--color-success: #2E7D52;
--color-danger: #C42E2E;
--color-text: #211F18;
--color-text-muted: #6E6552;
--color-white: #fff;
--color-card-bg: #ffffff;
--color-border: #DED6C6;
--radius: 6px; /* was 3px — a touch softer, still industrial */
--font-main: 'Oswald', 'Arial Narrow', Arial, sans-serif; /* display */
--font-body: 'Barlow', system-ui, -apple-system, sans-serif; /* body */
/* one shared, lighter elevation token */
--shadow-card: 0 1px 3px rgba(31, 28, 18, 0.08), 0 1px 2px rgba(31, 28, 18, 0.04);
--shadow-float: 0 8px 24px rgba(31, 28, 18, 0.14);
}
/* ---- Two-font system ----------------------------------------------------- */
/* Body / running text → Barlow. Titles, labels, buttons, badges keep Oswald
because app.css sets them to var(--font-main) explicitly. */
body { font-family: var(--font-body); letter-spacing: 0; }
/* Form values read better in Barlow than condensed Oswald */
.form-input, .input, .search-bar, .search-bar__input,
.line-item__fields input, .email-row__input, .email-row .form-input,
.catalog-form__row input, .catalog-form__row select,
.catalog-item__edit-fields input, .catalog-item__edit-fields select {
font-family: var(--font-body);
}
/* ---- Size harmonisation (tame the ad-hoc rem values) --------------------- */
.section-title, .section__title { font-size: 1.25rem; letter-spacing: .04em; }
.line-item__title { font-size: 1.0625rem; }
.line-item__fields input { font-size: 1.0625rem; font-weight: 600; }
.line-item__total { font-size: 1.25rem; }
.line-item__fields label, .line-item__total-cell label { font-size: .75rem; }
.quote-header__main h1 { font-size: 1.0625rem; }
/* ---- Lighter shadows: replace the blanket 0 4px 12px /.15 ----------------- */
.card, .tile, .voice-box, .quote-card, .quote-header, .table, .totals,
.line-item, .email-row, .note-box, .search-bar, .search-bar__input,
.btn--primary, .btn--danger, .btn--outline, .form-input, .input,
.generating-overlay, .product-card, .dropzone {
box-shadow: var(--shadow-card);
}
.login-card { box-shadow: var(--shadow-float); }
.totals__row, .table td { box-shadow: none; }
/* ---- Cards: hairline border instead of full-amber outline ---------------- */
.card { border: 1px solid var(--color-border); border-radius: 10px; }
.card--bordered-top { border-top: 3px solid var(--color-accent); }
.quote-card { border: 1px solid var(--color-border); border-radius: 10px; }
.tile { border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: 10px; }
.section-title, .section__title { border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 8px; }
/* ---- Calmer inputs: quiet at rest, amber ring on focus ------------------- */
.form-input, .input, .search-bar, .search-bar__input,
.line-item__fields input, .email-row__input {
border: 1.5px solid var(--color-border);
}
.form-input:focus, .input:focus, .search-bar:focus, .search-bar__input:focus,
.line-item__fields input:focus, .email-row__input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(201, 151, 29, 0.18);
background: #fff;
}
.line-item__fields input { background: #F7F4EE; }
/* ---- Buttons: press = 1px nudge (was opacity .8) ------------------------- */
.btn { transition: background .14s ease, border-color .14s ease, transform .06s ease; }
.btn:active { opacity: 1; transform: translateY(1px); }
.btn--primary:hover { background: #A87C14; border-color: #A87C14; color: #fff; }
.btn--dark:hover { background: #2C2A20; }
/* ---- Badges: align to the semantic palette ------------------------------ */
.badge--sent { background: #E2ECF6; border-color: #2F6DB0; color: #2F6DB0; }
.badge--signed, .badge--paid { background: #F3E5F5; border-color: #6A1B9A; color: #6A1B9A; }
.badge--accepted, .badge--validated { background: #E2F0E6; border-color: #2E7D52; color: #2E7D52; }
.badge--rejected { background: #F7E2E0; border-color: #C42E2E; color: #C42E2E; }
.badge--draft { background: #E9E3D6; border-color: #C9BFA9; color: #6E6552; }
/* ---- Totals: amber highlight (was lemon #FFFACD) ------------------------- */
.totals__row--total { background: #FBF3DA; }
/* ---- Tile / card emoji glyphs are gone — neutralise leftover sizing ------ */
.tile__icon, .card__icon, .dropzone__icon { font-size: 0; }
/* ============================================================================
LUCIDE icons — sizing for the elements that replace emoji.
Lucide swaps for an