/* App integration for Studio Balma design tokens */
:root {
  --ink: var(--balma-marfim);
  --muted: var(--balma-nevoa);
  --line: var(--balma-aco);
  --paper: var(--balma-grafite);
  --white: var(--balma-carvao);
  --deep: var(--balma-grafite);
  --green: var(--balma-ouro);
  --green-dark: var(--balma-ouro);
  --amber: var(--balma-ouro-claro);
  --danger: #E28A7F;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  color-scheme: dark;
}

body { background: var(--bg); color: var(--text); font: 300 var(--fs-body)/var(--lh-body) var(--font-text); }
.shell { max-width: var(--container); padding: var(--space-4) var(--space-4) var(--space-6); }
.brandmark { border-radius: var(--radius); background: var(--balma-ouro); color: var(--balma-grafite); }
.brandname,.card h2,.card h3,.hero h1,.crmTitle h2,.crmKpi strong,.crmStageCard b,.crmConversion strong { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
.brandcaption,.sub,.note,.catalogSource,.pdfHelp,.crmMuted,.crmKpi small,.crmFollowItem small,.crmActivityItem small { color: var(--text-muted); }

.hero { background: var(--balma-grafite); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; padding: var(--space-5); }
.hero:after { border-color: rgba(200,162,94,.24); box-shadow: 0 0 0 35px rgba(200,162,94,.035),0 0 0 75px rgba(200,162,94,.025); }
.hero h1 { font: 400 clamp(25px,3.3vw,var(--fs-h1))/1.25 var(--font-display); max-width: 780px; }
.hero p { color: var(--text-muted); }
.eyebrow,.tab.active,.crmTab.active,.estimateTab.active { color: var(--accent); }
.tag,.private { border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); }
.private i { background: var(--accent); }
.tabs,.crmSubnav,.estimateSwitch { border-color: var(--border); }
.tab,.crmTab,.estimateTab { color: var(--text-muted); transition: color var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease); }
.tab.active,.crmTab.active,.estimateTab.active { border-color: var(--accent); }

.card,.modal,.crmKpi,.crmStageCard,.comboResult,.option,.customItem,.pdfImageRow,.crmConversion,.crmStagePill {
  background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius); box-shadow: none;
}
.card { border-width: var(--border-width); padding: var(--space-4); }
.card h2 { color: var(--text); font: 400 18px/26px var(--font-display); }
.card h3 { color: var(--text); font: 500 14px/22px var(--font-text); }
.cardhead { margin-bottom: var(--space-3); }
.count,.chip,.catalogDim { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); }
.wizardStep,.catalogStep,.estimateTab,.btn,.crmActions .btn,.crmActionsCell .btn { border-radius: var(--radius); }
.wizardStep,.catalogStep { background: var(--surface); color: var(--text); border-color: var(--border); min-height: var(--control-height); }
.wizardStep.active,.catalogStep.active { background: rgba(200,162,94,.12); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wizardStep .stepNo,.catalogStep .stepNo { background: var(--border); color: var(--text); }
.wizardStep.done .stepNo,.catalogStep.done .stepNo { background: var(--accent); color: var(--on-accent); }
.option { min-height: 96px; color: var(--text); }
.option:hover:not(:disabled) { border-color: var(--accent); }
.option.selected { border-color: var(--accent); background: rgba(200,162,94,.11); box-shadow: inset 0 0 0 1px var(--accent); }
.option .code,.option .check { color: var(--accent); }
.option small,.option .availability { color: var(--text-muted); }

.field label,.crmFilters label,.switch,.radioRow,.lineitem,.pdfRows label { color: var(--text-muted); }
.field input,.field select,.field textarea,.group textarea,.crmFilters input,.crmFilters select,.crmTable select,.crmModal textarea,.pdfRows input,.pdfRows textarea,.customItem input {
  min-height: var(--control-height); background: var(--surface); color: var(--text); border: var(--border-width) solid var(--border); border-radius: var(--radius); font-family: var(--font-text);
}
.field input::placeholder,.field textarea::placeholder,.pdfRows input::placeholder,.pdfRows textarea::placeholder { color: var(--text-muted); opacity: .8; }
.field input:focus,.field select:focus,.field textarea:focus,.group textarea:focus,.crmFilters input:focus,.crmFilters select:focus,.crmTable select:focus,.crmModal textarea:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px rgba(226,200,143,.2); outline: none; }
select option { background: var(--surface); color: var(--text); }
.switch input,.radioRow input { accent-color: var(--accent); }
.btn { min-height: var(--control-height); padding: 0 18px; background: var(--surface); color: var(--text); border: var(--border-width) solid var(--border); font: 500 14px var(--font-text); transition: background var(--motion-duration) var(--motion-ease),color var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease); }
.btn:hover { border-color: var(--accent); color: var(--accent-hover); filter: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:focus-visible,.tab:focus-visible,.crmTab:focus-visible,.estimateTab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.total,.resultdark { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.total span,.resultdark small { color: var(--text-muted); }
.total strong,.resultdark .big { color: var(--accent); }
.lineitem,.metric,.sep,.crmFollowItem,.crmActivityItem,.crmTable th,.crmTable td { border-color: var(--border); }
.lineitem b,.metric div b,.crmLeadName,.crmTable td { color: var(--text); }
.warning,.catalogNotice,.crmLocalNotice { background: rgba(200,162,94,.09); border: 1px solid var(--balma-bronze); border-radius: var(--radius); color: var(--text); }
.catalogNotice b,.crmLocalNotice b { color: var(--accent-hover); }
.catalogProductImage,.filePreview img { border-color: var(--border); border-radius: var(--radius); background: var(--surface); }
.catalogPaid { color: var(--accent-hover); }
.catalogUnavailable,.crmDanger,.crmPillOverdue { color: #E28A7F; }
.crmPillOverdue { background: rgba(226,138,127,.12); }
.crmPillToday { color: var(--accent-hover); background: rgba(200,162,94,.12); }
.crmStagePill { padding: 4px 8px; border: 1px solid var(--border); }
.crmTable { color: var(--text); }
.crmTable th { color: var(--text-muted); }
.crmTable tbody tr:hover { background: rgba(200,162,94,.06); }
.crmConversion { background: rgba(200,162,94,.1); border: 1px solid var(--border); }
.crmEmpty,.empty,.footer { color: var(--text-muted); }
.crmModal .fields { scrollbar-color: var(--border) var(--surface); }
.modalveil { background: rgba(0,0,0,.76); }
.modal pre { background: var(--balma-grafite); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.pdfRows input,.pdfRows textarea { color: var(--text); }

@media (max-width:850px) { .shell { padding: 18px 16px 48px; } }
@media (max-width:570px) { .shell { padding: 14px 12px 36px; } .hero { padding: 24px 18px; } .card { padding: 18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:0ms!important; scroll-behavior:auto!important; } }