@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Inter:wght@400;500;600&display=swap');

/* ============================================================================================
   IDENTIDADE PARKET NO MOVEIS — 23/10/2026
   Tema CLARO da marca (escolha do Will): Off White Mineral no fundo, Bege Travertino nas barras,
   Preto Parket no texto, Chai no destaque. Cantos retos, borda de 1px, Cinzel caixa alta nos
   titulos e Inter no corpo.

   Este arquivo e uma CAMADA POR CIMA: entra depois de todos os CSS do app e so redefine cor,
   tipografia e canto. Nenhuma regra de posicao ou tamanho foi tocada, pra nao quebrar o editor 3D.

   Contraste MEDIDO (script da skill padrao-visual-parket), tudo sobre o fundo claro:
     preto #1A1A1A      11,7
     secundario #4A463F  6,3
     terciario #5E5A52   4,6
     Chai texto #5F4F42  5,2
   O Chai cheio (#968473) mede 2,4 no claro: por isso ele so vale como PREENCHIMENTO e BORDA,
   nunca como cor de texto. As cores de estado do app tambem reprovavam no claro e foram
   escurecidas mantendo o matiz (verde 1,4 -> 4,8; vermelho 2,8 -> 4,9; laranja 1,4 -> 4,9).
   ============================================================================================ */

:root, html, body {
  /* tokens da marca */
  --pk-preto:   #1A1A1A;
  --pk-bege:    #D8D3C7;
  --pk-off:     #F3F0E8;
  --pk-pedra:   #77736A;
  --pk-chai:    #968473;   /* preenchimento e borda */
  --pk-chai-tx: #5F4F42;   /* o mesmo matiz, medido pra servir de texto no claro */
  --pk-walnut:  #60544D;
  --pk-linha:   rgba(26,26,26,.16);
  --pk-linha-forte: rgba(26,26,26,.34);
  --pk-tx2:     #4A463F;
  --pk-tx3:     #5E5A52;
  --pk-papel:   #FFFFFF;

  /* as 12 variaveis do DesignLab, reapontadas pra marca */
  --bg:     #F3F0E8;
  --panel:  #FFFFFF;
  --panel2: #EDE9DF;
  --text:   #1A1A1A;
  --muted:  #4A463F;
  --blue:   #968473;
  --green:  #19652B;
  --orange: #7B4C16;
  --cyan:   #00606B;
  --pink:   #A51E6B;
  --danger: #9C3028;
  --yellow: #6B581A;
}

/* ── fundo, texto e tipografia ─────────────────────────────────────────────────────────────── */
/* O app pinta o fundo em DOIS lugares de peso: `html:not(.designlab-dark-enabled)
   body.project-home-active{background:#f4f7f9!important}` no home-theme, e um
   `documentElement.style.backgroundColor` escrito por JS no boot do index. Por isso a regra abaixo
   repete a MESMA especificidade do app (e vem depois, entao ganha) em vez de so usar `body`. */
html, html:not(.designlab-dark-enabled), html[style] {
  background: var(--pk-off) !important;
  color-scheme: only light !important;
}
html body,
html body[class],
html:not(.designlab-dark-enabled) body.project-home-active,
html:not(.designlab-dark-enabled) body {
  background: var(--pk-off) !important;
  color: var(--pk-preto) !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}
body * { font-family: inherit; }

/* Cinzel so nos titulos, sempre em caixa alta e com tracking alto. */
h1, h2, h3, .projectBrand, .homeModelsHead h2, .projectSectionHead h2 {
  font-family: Cinzel, Georgia, serif !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
  color: var(--pk-preto) !important;
}
h4, h5, h6 { color: var(--pk-preto) !important; letter-spacing: .04em; }
small, .muted, .hint, .sub, .subtitle { color: var(--pk-tx3) !important; }
a { color: var(--pk-chai-tx) !important; }

/* Canto reto e a marca. Vale pra tudo, inclusive o que vier de biblioteca. */
*, *::before, *::after { border-radius: 0 !important; }

/* ── superficies ───────────────────────────────────────────────────────────────────────────── */
/* O app desenha caixa com fundo branco/azulado e sombra. Aqui vira papel com borda de 1px. */
html body [class*="Card"], html body [class*="card"], html body [class*="Panel"], html body [class*="panel"],
html body [class*="Shell"], html body [class*="shell"], html body [class*="Dialog"], html body [class*="dialog"],
html body [class*="Sheet"], html body [class*="Box"], html body section, html body aside, html body dialog {
  background-color: var(--pk-papel);
  color: var(--pk-preto);
  border-color: var(--pk-linha);
  box-shadow: none !important;
}
/* barras de topo e de navegacao ficam no bege, como no cabecalho do gestao */
html body header, html body [class*="Topbar"], html body [class*="topBar"],
html body [class*="Header"], html body [class*="header"],
html body [class*="BottomNav"], html body [class*="Toolbar"], html body [class*="toolbar"], html body nav {
  background-color: var(--pk-bege) !important;
  color: var(--pk-preto) !important;
  border-color: var(--pk-linha) !important;
  box-shadow: none !important;
}

/* ── botoes ────────────────────────────────────────────────────────────────────────────────── */
html body button, html body .btn, html body [role="button"],
html body input[type="button"], html body input[type="submit"] {
  font-family: Inter, system-ui, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--pk-preto);
  background: transparent;
  color: var(--pk-preto);
  box-shadow: none !important;
}
button:hover, .btn:hover { border-color: var(--pk-chai); color: var(--pk-chai-tx); }
/* o botao principal e preto cheio com letra off white */
button.primary, .btn.primary, button[type="submit"], .homeQuickAction, .primaryAction {
  background: var(--pk-preto) !important;
  color: var(--pk-off) !important;
  border-color: var(--pk-preto) !important;
}
button.primary:hover, .btn.primary:hover, button[type="submit"]:hover {
  background: var(--pk-walnut) !important;
  border-color: var(--pk-walnut) !important;
}
button:disabled, .btn:disabled { opacity: .42; }

/* ── campos ────────────────────────────────────────────────────────────────────────────────── */
html body input, html body select, html body textarea {
  background: var(--pk-papel) !important;
  color: var(--pk-preto) !important;
  border: 1px solid var(--pk-linha-forte) !important;
  font-family: Inter, system-ui, sans-serif !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--pk-chai) !important; outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--pk-tx3) !important; }
label { color: var(--pk-tx2) !important; letter-spacing: .08em; text-transform: uppercase; font-size: .82em; }

/* ── o azul do DesignLab vira Chai ─────────────────────────────────────────────────────────── */
[style*="#2d7dfa"], [style*="#2D7DFA"] { color: var(--pk-chai-tx) !important; }
::selection { background: var(--pk-chai); color: var(--pk-off); }
:focus-visible { outline: 2px solid var(--pk-chai) !important; outline-offset: 1px; }

/* ── tabela ────────────────────────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; }
th {
  background: var(--pk-bege) !important; color: var(--pk-preto) !important;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78em; font-weight: 600;
  border-bottom: 1px solid var(--pk-linha-forte) !important;
}
td { border-bottom: 1px solid var(--pk-linha) !important; color: var(--pk-preto) !important; }

/* ── barra de rolagem, pra nao sobrar azul de sistema ──────────────────────────────────────── */
* { scrollbar-color: var(--pk-pedra) var(--pk-off); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pk-off); }
::-webkit-scrollbar-thumb { background: var(--pk-pedra); }

/* ============================================================================================
   SEGUNDA PASSADA — o que a auditoria no navegador ainda achou fora da paleta.
   (deploy/auditoria_cor.py lista, por classe, toda cor computada que nao e Parket.)
   O DesignLab usa uma familia verde-azulada: verde-petroleo nos destaques, ardosia no texto forte,
   cinza-azulado no secundario e verde/azul palido nos fundos e bordas. Cada familia vira o seu
   equivalente Parket, com o contraste ja medido.
   ============================================================================================ */

/* destaque verde-petroleo -> Chai como TEXTO (5,2 no claro; o Chai cheio reprova com 2,4) */
html body [class*="Eyebrow"], html body [class*="eyebrow"],
html body [class*="Brand"], html body [class*="brand"],
html body [class*="Accent"], html body [class*="accent"],
html body .cloudLine, html body [class*="Link"] {
  color: var(--pk-chai-tx) !important;
}
/* texto forte ardosia -> Preto Parket */
html body strong, html body b, html body dt, html body legend,
html body [class*="Title"], html body [class*="title"], html body [class*="Head"] {
  color: var(--pk-preto) !important;
}
/* secundario cinza-azulado -> secundario da marca, medido em 6,3 */
html body p, html body [class*="Copy"], html body [class*="copy"],
html body [class*="Desc"], html body [class*="desc"], html body [class*="Note"],
html body [class*="Pill"], html body [class*="Hint"], html body .secondary, html body .subtle {
  color: var(--pk-tx2) !important;
}
/* selo, chip, icone e miniatura: papel bege claro com borda de 1px, nada de verde palido */
html body [class*="Icon"], html body [class*="Badge"], html body [class*="Chip"],
html body [class*="Pill"], html body [class*="Blueprint"], html body [class*="Thumb"] {
  background-color: var(--pk-panel2, #EDE9DF) !important;
  border-color: var(--pk-linha) !important;
}
html body [class*="Icon"] { color: var(--pk-chai-tx) !important; }

/* TODA borda palida do app vira a linha da marca. O DesignLab tem oito tons de borda verde/azul
   claro; manter qualquer um deles entrega a paleta antiga mesmo com o resto certo. */
html body *[class] { border-color: var(--pk-linha); }
/* So quem ja ERA caixa ganha borda. A versao anterior usava [class*="Welcome"] e acabou
   desenhando moldura em volta do olho-de-boi e do paragrafo (homeWelcomeEyebrow, homeWelcomeCopy),
   que sao texto solto. Agora os alvos sao nominais. */
html body .projectCard, html body .projectWelcomeCard, html body .homeModelCard,
html body .environmentChoice, html body .projectEmpty, html body .homeQuickAction,
html body .projectAccountChip, html body .homeBlueprint {
  border: 1px solid var(--pk-linha) !important;
  background-color: var(--pk-papel) !important;
  background-image: none !important;
}
/* o painel que envolve a escolha de ambiente ainda nascia azulado */
html body [class*="environment"], html body [class*="Environment"],
html body [class*="Overlay"], html body [class*="overlay"], html body [class*="Backdrop"] {
  background-color: var(--pk-off) !important;
}

/* estados: as cores do app reprovam no claro, entao entram ja escurecidas no mesmo matiz */
html body .ok, html body [class*="Success"], html body [class*="success"] { color: #19652B !important; }
html body .warn, html body [class*="Warn"], html body [class*="warn"]       { color: #7B4C16 !important; }
html body .error, html body [class*="Error"], html body [class*="error"],
html body [class*="Danger"], html body [class*="danger"]                    { color: #9C3028 !important; }


/* ============================================================================================
   TERCEIRA PASSADA — nominal, em cima da auditoria da tela do DesignLab.
   ============================================================================================ */

/* O gradiente verde-agua da home e da planta de fundo. E o que mais entregava a paleta antiga. */
html body, html body::before, html body::after,
html body .homeBlueprint, html body .homeShell, html body .projectHome,
html body [class*="Gradient"], html body [class*="gradient"] {
  background-image: none !important;
}
html body .homeBlueprint { background-color: var(--pk-panel2, #EDE9DF) !important; }

/* verde-petroleo que sobrou -> Chai texto (5,2) */
html body .projectBrandLogo, html body .brandMoveis, html body .cloudLine,
html body .homeBlueprintLabel, html body .projectSectionIcon,
html body .homeWelcomeEyebrow, html body .environmentEyebrow, html body .homeQuickIcon {
  color: var(--pk-chai-tx) !important;
  background-color: transparent !important;
  border-color: var(--pk-linha) !important;
}
html body .projectBrandLogo, html body .homeQuickIcon, html body .projectSectionIcon {
  background-color: var(--pk-panel2, #EDE9DF) !important;
}
/* o circulo da conta: bege com letra preta, e quadrado como o resto */
html body [class*="Avatar"], html body [class*="avatar"], html body .projectAccountInitials {
  background: var(--pk-bege) !important; color: var(--pk-preto) !important;
}
/* ardosia -> preto; cinza-azulado -> secundario medido */
html body .homeVersionPill, html body .projectEmpty, html body .homeWelcomeCopy,
html body .projectAccountText, html body .projectAccountText span {
  color: var(--pk-tx2) !important;
}
html body .projectEmpty { background-color: var(--pk-papel) !important; }
html body .secondary {
  background-color: var(--pk-off) !important;
  color: var(--pk-preto) !important;
  border-color: var(--pk-linha) !important;
}

/* O "OLA, fulano@parket.works" e um h1. Em Cinzel caixa alta um e-mail longo estoura a linha:
   aqui ele quebra e encolhe, em vez de vazar pra fora do cartao. */
html body h1 {
  font-size: clamp(20px, 2.4vw, 30px) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* o contador "0 projetos" e os avisos pequenos */
html body [class*="Count"], html body [class*="count"] { color: var(--pk-tx2) !important; }

/* ============================================================================================
   QUARTA PASSADA — especificidade. Algumas regras do app usam DUAS classes
   (`.projectAccountText .cloudLine{color:#8f9da4}`) e por isso ganhavam de `html body .cloudLine`:
   na conta da especificidade classe pesa mais que elemento, entao 2 classes > 1 classe + 2 tags.
   Repetir a classe (`.cloudLine.cloudLine`) empata em classe e desempata no resto, sem precisar
   adivinhar a arvore de cada componente.
   ============================================================================================ */

html body .brandMoveis.brandMoveis,
html body .cloudLine.cloudLine,
html body .projectBrandLogo.projectBrandLogo,
html body .homeBlueprintLabel.homeBlueprintLabel,
html body .projectSectionIcon.projectSectionIcon,
html body .homeWelcomeEyebrow.homeWelcomeEyebrow,
html body .environmentEyebrow.environmentEyebrow {
  color: var(--pk-chai-tx) !important;
}
html body .cloudLine.cloudLine { background-color: transparent !important; }
html body .homeVersionPill.homeVersionPill,
html body .projectAccountText.projectAccountText,
html body .projectEmpty.projectEmpty { color: var(--pk-tx2) !important; }

/* o circulo da conta vira quadrado bege com a inicial em preto */
html body .projectAccountAvatar.projectAccountAvatar {
  border-radius: 0 !important;
  background: var(--pk-bege) !important;
  background-image: none !important;
  color: var(--pk-preto) !important;
  border: 1px solid var(--pk-linha) !important;
}

/* A aurora verde-agua da home: um <div> sem classe, so com
   `radial-gradient(circle at 9% 0%, rgba(42,184,167,.12) ...)`. Nao da pra selecionar por valor,
   entao o alvo e o que ele e: filho direto do body sem classe nenhuma. */
html body > div:not([class]) { background-image: none !important; }
/* os atalhos da home tinham gradiente branco-azulado; viram papel liso */
html body .homeQuickAction.homeQuickAction {
  background-image: none !important;
  background-color: var(--pk-papel) !important;
}

/* ============================================================================================
   QUINTA PASSADA — o tamanho certo do martelo.

   O app tem regras como
     `html:not(.designlab-dark-enabled) .projectBrand strong .brandMoveis{color:#148f83!important}`
   que valem 3 classes + 2 tags. Repetir a classe nao alcanca isso, e ficar empilhando classe e uma
   corrida sem fim. `:not(#_)` resolve de vez: `#_` nao existe na pagina, entao o seletor continua
   casando o mesmo elemento, mas passa a contar como ID — e um ID ganha de qualquer quantidade de
   classes. E a forma mais curta de dizer "esta cor e da marca, ponto".
   ============================================================================================ */

html body .brandMoveis:not(#_),
html body .cloudLine:not(#_),
html body .projectBrandLogo:not(#_),
html body .homeBlueprintLabel:not(#_),
html body .projectSectionIcon:not(#_),
html body .homeWelcomeEyebrow:not(#_),
html body .environmentEyebrow:not(#_),
html body [class*="Eyebrow"]:not(#_) {
  color: var(--pk-chai-tx) !important;
}
html body .homeVersionPill:not(#_),
html body .projectEmpty:not(#_),
html body .projectAccountText:not(#_),
html body .projectAccountText span:not(#_) { color: var(--pk-tx2) !important; }
html body .projectAccountText strong:not(#_) { color: var(--pk-preto) !important; }
html body .cloudLine:not(#_) { background-color: transparent !important; border-color: var(--pk-linha) !important; }
html body .projectAccountAvatar:not(#_) {
  border-radius: 0 !important; background: var(--pk-bege) !important; color: var(--pk-preto) !important;
}

/* A aurora verde-agua: o <div> tem `class=""`, atributo presente e vazio — por isso o
   `:not([class])` da passada anterior nao pegava. */
html body > div[class=""]:not(#_), html body > div:not([class]):not(#_) {
  background-image: none !important;
}

/* Fecho: nenhum texto do app pode continuar verde-petroleo. Os seis tons que a auditoria
   encontrou viram Chai texto, que e o destaque da marca e mede 5,2 no claro. */
html body [style*="#148f83"]:not(#_), html body [style*="#128b7f"]:not(#_) {
  color: var(--pk-chai-tx) !important;
}

/* ── acabamento ────────────────────────────────────────────────────────────────────────────── */
/* o contador ao lado de "Projetos recentes" e os numeros de apoio */
html body [class*="Count"]:not(#_), html body [class*="count"]:not(#_),
html body .projectSectionHead span:not(#_) { color: var(--pk-tx2) !important; }

/* A barra flutuante de ferramentas do editor nasce quase preta. No tema claro da marca isso vale —
   preto com letra bege e identidade Parket — mas tem que ser o preto certo, nao um cinza. */
html body [class*="Float"]:not(#_), html body [class*="float"]:not(#_),
html body [class*="ToolPalette"]:not(#_), html body [class*="toolbarDock"]:not(#_) {
  background-color: var(--pk-preto) !important;
  background-image: none !important;
  color: var(--pk-bege) !important;
  border: 1px solid var(--pk-linha-forte) !important;
}
html body [class*="Float"] *:not(#_), html body [class*="float"] *:not(#_) { color: var(--pk-bege) !important; }

/* O botao/atalho `secondary` ainda nascia branco-azulado com texto cinza-azul. */
html body .secondary:not(#_) {
  background-color: var(--pk-off) !important;
  background-image: none !important;
  color: var(--pk-preto) !important;
  border-color: var(--pk-linha) !important;
}
html body .secondary span:not(#_), html body .secondary small:not(#_) { color: var(--pk-tx2) !important; }
/* as ultimas bordas verde/azul palidas */
html body .projectAccountChip:not(#_), html body .projectEmpty:not(#_),
html body .homeQuickAction:not(#_), html body .projectCard:not(#_) {
  border-color: var(--pk-linha) !important;
}
html body .projectAccountText span:not(#_) { color: var(--pk-tx2) !important; }