/* Redondeza — one visual system for every screen (livro da marca, cap. 04 "Sistema de identidade", 27/10/2026).
 *
 * Paper, not a white page: the ground is papel (#F1EEE7) and everything people work on sits on folha sheets (#FBFAF7) with
 * a hairline edge and no shadow, so the quote PDF (white) reads as the one real document on the table. Ink for text,
 * azul (#2340A0) for the one action of each screen, noite (#101B3F) for the rental houses' path; bordô belongs to the
 * character only and never appears here. Host Grotesk for everything read; Courier Prime (the screenplay letter) for
 * data: codes, kilometres, times, figures. No dots, no texture: the paper is a colour. Paper is the default; the sun/moon
 * switch in the top bar gives a dark version in chumbo greys.
 *
 * Loaded by every page AFTER its own <style>, so it re-points the tokens each page already uses (--bg, --panel, --panel-2,
 * --ink, --muted, --line, --accent, ...) and normalises the shared components. Page-specific layout stays in each page.
 */

@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/frontend/host-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/frontend/courier-prime-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/frontend/courier-prime-700.woff2") format("woff2"); }

/* ------------------------------------------------------------------ tokens */
/* papel: the default (contrasts measured in the brand book: tinta 15.6:1, grafite 6.6:1, azul 7.8:1, folha on azul 8.7:1) */
html:root[data-theme="light"], html:root:not([data-theme]) {
  color-scheme: light;
  --bg: #F1EEE7;          /* papel */
  --dot: transparent;     /* no texture: the paper is a colour */
  --panel: #FBFAF7;       /* folha */
  --panel-2: #F7F5F0;     /* a well inside a sheet (fields) */
  --active: #DDE3F3;      /* névoa: the selected row / item */
  --ink: #161616;         /* tinta */
  --muted: #55534E;       /* grafite */
  --faint: #6B6862;       /* meta, 5:1 on papel */
  --line: #E6E1D6;        /* hairline (never text) */
  --line-strong: #A8A398; /* controls and fields: visible edge */
  --accent: #2340A0;      /* azul: the action */
  --accent-ink: #FBFAF7;
  --ok: #1A6B43; --warn: #8A5300; --danger: #B42318;
  --ok-bg: #E3F0E8; --warn-bg: #F6EBD6;
  --night: #101B3F;       /* noite: the rental houses' path */
  --radius: 6px;
  --shadow: none;
  --float: 0 18px 40px rgba(22,22,22,.14);   /* only what floats: menus, dialogs, the cart drawer */
  --font: "Host Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --pnav-bg: #F1EEE7; --pnav-ink: #161616; --pnav-muted: #55534E; --pnav-accent: #2340A0; --pnav-line: #D7D2C7;
}
/* chumbo: the dark version (Junior, 27/10: greys, not the night blue, and not flat black), same steps as the paper */
html:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1F21;          /* chumbo: the table */
  --dot: transparent;
  --panel: #26272A;       /* a sheet */
  --panel-2: #2D2E32;     /* fields */
  --active: #3A3B40;      /* the selected row / item */
  --ink: #F1EEE7;         /* papel as text: 13.9:1 on the sheet */
  --muted: #BDBAB2;       /* 8.6:1 */
  --faint: #9C9990;       /* 5.6:1 */
  --line: #36373B;
  --line-strong: #55565C;
  --accent: #EE7A8B;      /* bordô lifted for text on chumbo (links, marks): 5.4:1 on the sheet */
  --accent-ink: #FBFAF7;
  --accent-fill: #A60321; /* the logo's bordô: the filled buttons (Junior, 27/10), folha on it 7.3:1 */
  --ok: #6FC596; --warn: #E2B25C; --danger: #F08A80;
  --ok-bg: rgba(111,197,150,.14); --warn-bg: rgba(226,178,92,.14);
  --night: #101B3F;
  --radius: 6px;
  --shadow: none;
  --float: 0 18px 40px rgba(0,0,0,.45);
  --font: "Host Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --pnav-bg: #1E1F21; --pnav-ink: #F1EEE7; --pnav-muted: #BDBAB2; --pnav-accent: #EE7A8B; --pnav-line: #36373B;
}

/* ------------------------------------------------------------------ ground and type */
html, body { background-color: var(--bg); }
body {
  color: var(--ink);
  font-family: var(--font) !important;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: var(--font) !important; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 1px solid var(--accent) !important; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }

/* figures are drawn in the technical mono: prices, totals, codes, counts */
:is(.price, .pr, .total b, .subtotal-row .val, .val, .num, .code, #v3Code, .qrow .code, .stepper-val, .step span,
.cart .total b, .sum-block .v, .eq-head span:last-child, .eq-group .gt span:last-child, td.num, .tot, .kv .v.num):not(.doc *) {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
:is(.price, .pr):not(.doc *) { font-weight: 500 !important; }

/* small labels: sentence case, never tracked capitals (the stationery is in the dots and hairlines, not in shouting) */
.filters h2, .grouphead, .gh.c, .sheet h4, .mseries .mt, .camblock .t, .cgroup .gt, dialog label, label.f,
.sec-title, .subsection-title, .eq-group .gt, fieldset legend, th, .card summary, .steps span {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.filters h2, .sheet h4, .mseries .mt, .camblock .t, .cgroup .gt, dialog label, label.f, .sec-title, .subsection-title, .eq-group .gt {
  font-size: 12px !important; font-weight: 500 !important; color: var(--muted) !important;
}

/* ------------------------------------------------------------------ surfaces: opaque sheets with a hairline, no shadow */
.card, .row, .mpanel, .filters, .cart, .form-panel, .prop, .camblock, .li, .list, dialog, .item-row, .rental-group, .sum-block, .svc-line {
  box-shadow: none !important;
}
.card, .row, .mpanel, .prop, .list, .camblock, .sum-block, .svc-line, .rental-group, .item-row { border-radius: var(--radius) !important; }
.card { border: 1px solid var(--line); }
dialog { border-radius: 8px !important; box-shadow: var(--float) !important; border: 1px solid var(--line-strong) !important; }
dialog::backdrop { background: rgba(5,5,4,.62); }
.row:hover, .mrow:hover { border-color: var(--line-strong) !important; }
.row.in { background: var(--panel) !important; border-color: var(--accent) !important; }

/* inputs: one height, a visible edge that turns azul on focus */
input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input:not([type]), select, textarea {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--panel-2) !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
.toolbar .search input { box-shadow: none !important; border-radius: var(--radius) !important; }

/* ------------------------------------------------------------------ buttons: one filled action (azul), the rest hairline */
.btn, .addbtn, .primary, button.primary, .cta, .fab, .secondary, button.more, .seg, .iconbtn, .mpill, .mchip, .pill, .chip, .tag, .fit, .step, .stepper, .linkbtn {
  border-radius: var(--radius) !important;
}
.tag, .fit, .chip, .pill, .mchip { border-radius: 4px !important; }
.btn, .addbtn, .primary, button.primary, .cta { background: var(--accent) !important; color: var(--accent-ink) !important; border: 1px solid var(--accent) !important; font-weight: 600 !important; }
.btn:hover, .addbtn:hover, .primary:hover, button.primary:hover, .cta:hover { filter: none !important; background: color-mix(in srgb, var(--accent) 88%, var(--ink)) !important; }
.btn.ghost, .secondary, button.more { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; font-weight: 500 !important; }
.btn.ghost:hover, .secondary:hover, button.more:hover { border-color: var(--muted) !important; }
.btn.danger { background: transparent !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)) !important; }
.btn:disabled, button:disabled { opacity: .45; cursor: default; }

/* selection = névoa and a 2px azul line, never a block of colour */
.grouplist button.on, .tabs a.on {
  background: var(--active) !important; color: var(--ink) !important; font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
.grouplist button.on .n, .tabs a.on .n { color: var(--accent) !important; opacity: 1 !important; }
.seg { background: transparent !important; border: 1px solid var(--line-strong) !important; }
.seg button { color: var(--muted) !important; }
.seg button.on { background: var(--active) !important; color: var(--ink) !important; box-shadow: inset 0 -1px 0 var(--accent) !important; }
.pill.on, .mpill.on, .mchip.sel, .chk-chip.on, .iconbtn.on {
  background: var(--active) !important; color: var(--ink) !important; border-color: var(--accent) !important;
}
.mpill.on small { color: var(--accent) !important; opacity: 1 !important; }
.mpill:hover, .mchip:hover { border-color: var(--line-strong) !important; }

/* tags: quiet, the meaning in a pale tint of their own hue */
.tag { background: transparent !important; border: 1px solid var(--line) !important; color: var(--muted) !important; font-size: 11px !important; }
.tag.ok, .tag.own, .fit.ok { background: var(--ok-bg) !important; color: var(--ok) !important; border-color: transparent !important; }
.tag.warn, .fit.adapter { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: transparent !important; }
.fit.no { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; color: var(--danger) !important; }
.tag.spec { background: transparent !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.tag.house { color: var(--ink) !important; }
.cart .head .cnt, .pnav-badge { font-family: var(--mono); }

/* ------------------------------------------------------------------ the drafting-sheet details */
/* group headings carry a dotted leader to the right edge, like a schedule on a drawing */
.grouphead::after { background: none !important; border-top: 1px dotted var(--line-strong); height: 0 !important; }
.gh.c { color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; border-bottom: 1px dotted var(--line-strong) !important; }
.gh.c .n { font-family: var(--mono); color: var(--faint) !important; }
.gh.l1 { border-bottom: 1px solid var(--line) !important; font-weight: 600 !important; }
.sheet, .mrow .xp { border-top-style: dotted !important; }

/* ------------------------------------------------------------------ catálogo */
.filters, .cart { background: var(--panel) !important; border-color: var(--line) !important; }
.toolbar { background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; }
.alertbar { background: transparent !important; border-radius: var(--radius) !important; }
.alert { border-left-width: 2px !important; border-radius: var(--radius) !important; background: var(--panel-2) !important; }
.okbox { border-radius: var(--radius) !important; background: transparent !important; }

/* ------------------------------------------------------------------ orçamento */
.form-panel { background: var(--panel) !important; border-right: 1px solid var(--line) !important; }
.form-panel .card { background: var(--bg) !important; border: 1px solid var(--line) !important; padding: 13px 15px 14px !important; }
.form-panel .card > summary { color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; }
.form-panel .card > summary .count { color: var(--faint) !important; font-family: var(--mono); }
.sticky-actions { background: var(--panel) !important; border-bottom: 1px solid var(--line) !important; }
.issuer-strip, #v3Status { background: var(--bg) !important; border-color: var(--line) !important; }
#v3Status .badge { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-family: var(--font); font-weight: 500 !important; letter-spacing: 0 !important; }
#v3Status .badge.issued { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
button { border-radius: var(--radius) !important; }
button.ghost { color: var(--danger) !important; background: transparent !important; }
.menu-list { border-radius: 8px !important; box-shadow: var(--float) !important; border-color: var(--line-strong) !important; }
.compat-bar { background: transparent !important; border-radius: var(--radius) !important; }
.compat { border-left-width: 2px !important; border-radius: var(--radius) !important; }
.preview-panel { background: transparent !important; }
.preview-toolbar .hint { color: var(--muted) !important; }
/* the quote document stays paper: it is the one real sheet on the table */
.doc { box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.55) !important; border-radius: 1px; }
html:root:not([data-theme="dark"]) .doc { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 24px 50px -24px rgba(40,30,10,.25) !important; }

/* ------------------------------------------------------------------ perfil / locadoras */
.side h1, .shell > h1 { font-weight: 600 !important; letter-spacing: -0.01em; }
.tabs a { border-radius: var(--radius) !important; }
.tabs a:hover { background: var(--panel) !important; }
.li { background: var(--panel) !important; }
.empty { color: var(--muted); }
.toast { border-radius: var(--radius) !important; font-family: var(--font); }

/* the top bar (platform-nav.css draws it; these tune it to the sheet) */
.platform-nav { font-family: var(--font) !important; }

@media print {
  html, body { background: #fff !important; background-image: none !important; }
}

/* ------------------------------------------------------------------ round 2: one filled action per screen */
/* the severity of a warning is a small square in its colour, never an emoji */
i.sev { display:inline-block; width:7px; height:7px; border-radius:1px; margin-right:8px; vertical-align:1px; background:var(--warn); flex:none; }
i.sev.error { background:var(--danger); } i.sev.tip { background:var(--muted); }
/* Orçamento: "Baixar PDF" in the toolbar is the one filled action; the rest are hairline buttons */
.form-panel button:not(.primary):not(.linkbtn):not(.svc-star):not(.ghost) { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.form-panel button.small.primary, .form-panel button.primary:not(.dl-btn) { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; }
.form-panel .cta { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.form-panel .cta:hover, .form-panel button.small.primary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.preview-toolbar .dl-btn { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.sticky-actions .menu-btn { border: 1px solid var(--line-strong) !important; }
details.more > summary { color: var(--muted) !important; font-size: 12px !important; }
/* Perfil: the row actions are hairline; the accent marks "Reenviar" by its text only */
.qrow .btn, .li .acts .btn { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; font-weight: 500 !important; }
.qrow .btn:not(.ghost) { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
/* Locadoras: the steps are a ruled row, the current one underlined */
.steps span { border-radius: 4px !important; background: transparent !important; }
.steps span.on { background: var(--active) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; box-shadow: inset 0 -1px 0 var(--accent); }
.steps span.done { color: var(--ok) !important; }
.drop { border-radius: var(--radius) !important; border-width: 1px !important; border-color: var(--line-strong) !important; }
.drop.on { border-color: var(--accent) !important; }
/* Catálogo: the count badge is a ruled figure, the floating button the one filled action on small screens */
.cart .head .cnt { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 4px !important; }
.fab { box-shadow: var(--float) !important; }
/* Catálogo técnico (/catalog): the status is a pale tag, "Adicionar" a hairline button, labels in sentence case */
.page-tecnico .filters label, .page-tecnico .spec-group h3 { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
.page-tecnico .spec-group h3 { color: var(--muted) !important; font-weight: 600; }
.page-tecnico .badge { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 11px !important; border-radius: 4px !important; background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line-strong); }
.page-tecnico .badge.active { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent) !important; }
.page-tecnico .badge.draft { color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent) !important; }
.page-tecnico .add-btn { background: transparent !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; border-radius: 4px !important; font-weight: 500 !important; }
.page-tecnico .add-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; opacity: 1 !important; }
.page-tecnico .card .specs-link { color: var(--muted) !important; text-decoration: underline dotted !important; text-underline-offset: 3px; }
.page-tecnico .card .specs-link:hover { color: var(--accent) !important; }
/* checkboxes and radios take the brand's azul */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* chumbo: the one filled action of each screen in the logo's bordô (Junior, 27/10); text accents use the lighter bordô */
html:root[data-theme="dark"] :is(.btn, .addbtn, .primary, button.primary, .cta, .fab):not(.ghost):not(.secondary) {
  background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; color: #FBFAF7 !important;
}
html:root[data-theme="dark"] :is(.btn, .addbtn, .primary, button.primary, .cta, .fab):not(.ghost):not(.secondary):hover { background: #8E021C !important; }