:root {
  --baruk-bg: #f4f6f8;
  --baruk-surface: #ffffff;
  --baruk-surface-soft: #f8fafc;
  --baruk-border: #d9e2ec;
  --baruk-text: #1f2933;
  --baruk-muted: #66788a;
  --baruk-primary: #1f6feb;
  --baruk-primary-dark: #174ea6;
  --baruk-danger: #c62828;
  --baruk-success: #2e7d32;
  --baruk-warning: #b7791f;
  --baruk-radius: 14px;
  --baruk-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--baruk-bg);
  color: var(--baruk-text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

:root {
  --baruk-terracota: #7A3E2F;
  --baruk-cafe: #3A2B24;
  --baruk-madeira: #8B5E34;
  --baruk-dourado: #D2B46F;
  --baruk-areia: #F4EFE7;
  --baruk-oliva: #6FAF8E;
  --baruk-laranja: #F97316;
  --baruk-texto: #2F241F;
  --baruk-muted-design: #7A6A61;
  --baruk-card-design: rgba(255, 252, 247, .96);
  --baruk-border-design: rgba(122, 62, 47, .14);
  --baruk-shadow-design: 0 20px 58px rgba(122, 62, 47, .10);
}

html body,
html body .app-shell,
html body .erp-layout,
html body .auth-page,
html body .design-system-page {
  background: radial-gradient(circle at top left, rgba(210, 180, 111, .18), transparent 32%), linear-gradient(180deg, #fffaf4 0%, var(--baruk-areia) 100%) !important;
  color: var(--baruk-texto) !important;
}

html body .erp-shell-header,
html body .erp-menu-bar,
html body .ds-topnav,
html body .ds-topnav__bar {
  background: linear-gradient(135deg, var(--baruk-cafe), #271d18) !important;
  border-color: rgba(210, 180, 111, .26) !important;
  box-shadow: 0 18px 48px rgba(58, 43, 36, .22) !important;
}

html body .erp-brand__mark,
html body .ds-topnav__mark {
  background-color: rgba(244, 239, 231, .96) !important;
  background-image: url("../../favicon.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 72% 72% !important;
  color: transparent !important;
  font-size: 0 !important;
  border: 1px solid rgba(210, 180, 111, .38) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16) !important;
}

html body .erp-brand__logo-box,
html body .ds-topnav__logo-box {
  background: rgba(244, 239, 231, .96) !important;
  border-color: rgba(210, 180, 111, .38) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16) !important;
}

html body .auth-brand::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  background: url("../../favicon.svg") center / contain no-repeat;
}

html body .erp-main,
html body .erp-content,
html body .auth-card,
html body .ds-hero,
html body .ds-section,
html body .ds-card-demo,
html body .dashboard-card,
html body .kanban-column,
html body .module-card,
html body .client-card,
html body .project-card,
html body .ambiente-card,
html body .catalogo-card,
html body .orcamento-card,
html body .financeiro-card,
html body .assinatura-card,
html body .backoffice-card,
html body .projeto-3d-card,
html body article,
html body section.card,
html body .card {
  background-color: var(--baruk-card-design) !important;
  border-color: var(--baruk-border-design) !important;
  box-shadow: var(--baruk-shadow-design) !important;
}

html body .erp-main h1,
html body .erp-main h2,
html body .erp-main h3,
html body .erp-main h4,
html body .page-title,
html body .section-title,
html body .card-title,
html body .auth-brand__title,
html body .ds-hero h2,
html body .ds-section h3,
html body .ds-topnav__brand strong {
  color: var(--baruk-terracota) !important;
}

html body .erp-main p,
html body .erp-main small,
html body .auth-brand__subtitle,
html body .card-subtitle,
html body .page-subtitle,
html body .section-subtitle,
html body .ds-hero p,
html body .ds-section p {
  color: var(--baruk-muted-design) !important;
}

html body .auth-button,
html body .ds-button--primary,
html body .btn-primary,
html body button[type="submit"] {
  background: linear-gradient(135deg, var(--baruk-terracota), var(--baruk-madeira)) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(122, 62, 47, .20) !important;
}

html body .auth-button--secondary,
html body .ds-button--secondary,
html body .btn-secondary,
html body .erp-userbar__logout {
  background: rgba(244, 239, 231, .88) !important;
  color: var(--baruk-terracota) !important;
  border-color: rgba(122, 62, 47, .18) !important;
}

html body input,
html body select,
html body textarea,
html body .form-control,
html body .auth-field input {
  background: rgba(255, 252, 247, .96) !important;
  border-color: rgba(122, 62, 47, .20) !important;
  color: var(--baruk-texto) !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus,
html body .form-control:focus,
html body .auth-field input:focus {
  border-color: var(--baruk-terracota) !important;
  box-shadow: 0 0 0 3px rgba(122, 62, 47, .12) !important;
  outline: none !important;
}

html body .badge,
html body .tag,
html body .status,
html body .chip,
html body .ds-eyebrow {
  background: rgba(122, 62, 47, .10) !important;
  color: var(--baruk-terracota) !important;
  border-color: rgba(122, 62, 47, .16) !important;
}

html body table,
html body .table,
html body .ds-table {
  background: rgba(255, 252, 247, .94) !important;
  border-color: var(--baruk-border-design) !important;
}

html body th,
html body .ds-table th {
  background: rgba(122, 62, 47, .10) !important;
  color: var(--baruk-terracota) !important;
}

html body a {
  color: var(--baruk-terracota) !important;
}

html body .erp-nav__button,
html body .erp-menu-toggle,
html body .ds-topnav__drawer a {
  color: rgba(255, 255, 255, .88) !important;
}

html body .erp-nav__button:hover,
html body .erp-nav__button.is-active,
html body .erp-menu-toggle:hover,
html body .erp-menu-toggle.is-open {
  background: rgba(210, 180, 111, .12) !important;
  color: #fff !important;
}