/* ==========================================================================
   ESTEYRA WHITELABEL THEME · DS v2 "Ink Premium" para Chatwoot v4.17.1
   Alvo validado: https://caldesul.esteyra.com (v4.17.1: dashboard + v3app)
   Regras duras aplicadas:
     R0: Geometria institucional 2px a 4px (0 apenas em tabela/regua/scrollbar)
     R1: Gate WCAG AA >= 4.5:1 em todo texto (#0E0D09 sobre #EB5E28 = 5.71:1)
     R2: Logos oficiais SVG vetoriais via InstallationConfig (/brand-assets/esteyra)
     R3: Zero border-left decorativo; filete de marca sempre no topo (border-top)
     R7: Scrollbar quadrada (::-webkit-scrollbar apenas, sem scrollbar-width)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Aspekta:wght@350;400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Crato Mono';
  src: url('/brand-assets/esteyra/esteyra-crato-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CAMADA A · TOKENS RGB (:root Light "Paper" e .dark "Ink Premium")
   Formato compativel com rgb(var(--token) / <alpha>) e rgba(var(--border-*))
   ========================================================================== */

:root {
  /* Rampa Esteira Orange mapeada nos tokens de acento do Chatwoot v4 */
  --blue-1: 254 248 244;
  --blue-2: 252 238 230;
  --blue-3: 249 214 194;
  --blue-4: 246 196 168;
  --blue-5: 244 180 146;
  --blue-6: 242 162 121;
  --blue-7: 240 143 95;
  --blue-8: 238 115 64;
  --blue-9: 235 94 40;
  --blue-10: 206 77 27;
  --blue-11: 168 60 19;
  --blue-12: 74 26 9;

  --solid-blue: 252 238 230;
  --solid-blue-2: 254 248 244;
  --text-blue: 126 45 15;
  --border-blue-strong: 168 60 19;
  --border-blue: 235, 94, 40, .5;

  /* Rampa Warm Neutral Esteyra (Paper #F4F2EC -> Deepest Ink #0E0D09) */
  --slate-1: 255 255 255;
  --slate-2: 244 242 236;
  --slate-3: 233 229 219;
  --slate-4: 224 219 208;
  --slate-5: 217 212 201;
  --slate-6: 203 197 185;
  --slate-7: 188 182 169;
  --slate-8: 148 142 129;
  --slate-9: 110 104 93;
  --slate-10: 96 90 80;
  --slate-11: 81 76 67;
  --slate-12: 14 13 9;

  --gray-1: 255 255 255;
  --gray-2: 244 242 236;
  --gray-3: 233 229 219;
  --gray-4: 224 219 208;
  --gray-5: 217 212 201;
  --gray-6: 203 197 185;
  --gray-7: 188 182 169;
  --gray-8: 148 142 129;
  --gray-9: 110 104 93;
  --gray-10: 96 90 80;
  --gray-11: 81 76 67;
  --gray-12: 14 13 9;

  /* Superficies e bordas Light */
  --background-color: 244 242 236;
  --surface-1: 255 255 255;
  --surface-2: 244 242 236;
  --surface-active: 233 229 219;
  --card-color: 255 255 255;
  --solid-1: 255 255 255;
  --solid-2: 244 242 236;
  --solid-3: 233 229 219;
  --solid-active: 224 219 208;
  --button-color: 255 255 255;
  --label-background: 244 242 236;
  --border-container: 217 212 201;
  --border-strong: 188 182 169;
  --border-weak: 233 229 219;

  /* Geometria institucional R0 */
  --border-radius-small: 2px;
  --border-radius-medium: 3px;
}

.dark {
  /* Rampa Esteira Orange para superficies escuras */
  --blue-1: 20 14 10;
  --blue-2: 30 19 13;
  --blue-3: 42 24 16;
  --blue-4: 58 31 18;
  --blue-5: 78 39 20;
  --blue-6: 102 48 23;
  --blue-7: 126 45 15;
  --blue-8: 168 60 19;
  --blue-9: 235 94 40;
  --blue-10: 238 115 64;
  --blue-11: 240 143 95;
  --blue-12: 252 238 230;

  --solid-blue: 42 24 16;
  --solid-blue-2: 26 18 13;
  --text-blue: 249 214 194;
  --border-blue-strong: 238 115 64;
  --border-blue: 238, 115, 64, .5;

  /* Rampa Warm Neutral Dark (Deepest Ink #0E0D09 -> Gold Black #232019 -> Paper #F4F2EC) */
  --slate-1: 14 13 9;
  --slate-2: 22 20 15;
  --slate-3: 35 32 25;
  --slate-4: 43 40 32;
  --slate-5: 56 52 45;
  --slate-6: 68 63 55;
  --slate-7: 81 76 67;
  --slate-8: 110 104 93;
  --slate-9: 148 142 129;
  --slate-10: 168 162 149;
  --slate-11: 217 212 201;
  --slate-12: 244 242 236;

  --gray-1: 14 13 9;
  --gray-2: 22 20 15;
  --gray-3: 35 32 25;
  --gray-4: 43 40 32;
  --gray-5: 56 52 45;
  --gray-6: 68 63 55;
  --gray-7: 81 76 67;
  --gray-8: 110 104 93;
  --gray-9: 148 142 129;
  --gray-10: 168 162 149;
  --gray-11: 217 212 201;
  --gray-12: 244 242 236;

  /* Superficies e bordas Dark */
  --background-color: 14 13 9;
  --surface-1: 22 20 15;
  --surface-2: 35 32 25;
  --surface-active: 43 40 32;
  --card-color: 22 20 15;
  --solid-1: 22 20 15;
  --solid-2: 35 32 25;
  --solid-3: 43 40 32;
  --solid-active: 56 52 45;
  --button-color: 35 32 25;
  --label-background: 35 32 25;
  --border-container: 43, 40, 32, .9;
  --border-strong: 56 52 45;
  --border-weak: 43 40 32;
}

/* ==========================================================================
   CAMADA B · CLASSES COMPILADAS TAILWIND n-brand + GATE WCAG AA (R1)
   Texto sobre #EB5E28 e SEMPRE #0E0D09 (5.71:1 AA), nunca branco (3.41:1 FAIL)
   ========================================================================== */

.bg-n-brand,
.bg-n-blue-9,
.bg-\[\#2781F6\],
.banner.primary,
.group:hover .group-hover\:bg-n-brand,
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type=submit] {
  background-color: #EB5E28 !important;
  color: #0E0D09 !important;
}

.bg-n-brand.text-white,
.bg-n-brand .text-white,
.bg-n-brand.text-n-slate-1,
.bg-n-brand .text-n-slate-1,
.bg-n-brand span,
.bg-n-brand svg,
.bg-n-blue-9.text-white,
.bg-n-blue-9 .text-white,
.bg-\[\#2781F6\] .text-white,
.banner.primary,
.banner.primary * {
  color: #0E0D09 !important;
}

.checked\:bg-n-brand:checked,
.dark\:checked\:bg-n-brand:checked:is(.dark *),
.indeterminate\:bg-n-brand:indeterminate {
  background-color: #EB5E28 !important;
  border-color: #EB5E28 !important;
  color: #0E0D09 !important;
}

.checked\:bg-n-brand:checked:after,
.dark\:checked\:bg-n-brand:checked:is(.dark *):after,
.indeterminate\:bg-n-brand:indeterminate:after {
  color: #0E0D09 !important;
}

/* Hover de CTAs primarios: #CE4D1B no Light (UI >= 3:1) e #EE7340 no Dark (6.63:1 AA) */
.bg-n-brand:hover:not(:disabled),
.hover\:bg-n-brand\/80:hover,
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type=submit]:hover {
  background-color: #CE4D1B !important;
  color: #0E0D09 !important;
}

.dark .bg-n-brand:hover:not(:disabled),
.dark .hover\:bg-n-brand\/80:hover {
  background-color: #EE7340 !important;
  color: #0E0D09 !important;
}

/* Superficies translúcidas de marca */
.bg-n-brand\/5 {
  background-color: rgb(235 94 40 / 0.06) !important;
}

.bg-n-brand\/10,
.dark\:bg-n-brand\/10:is(.dark *),
.hover\:bg-n-brand\/10:hover {
  background-color: rgb(235 94 40 / 0.12) !important;
}

.bg-n-brand\/20,
.hover\:enabled\:bg-n-brand\/20:enabled:hover,
.focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: rgb(235 94 40 / 0.20) !important;
}

.from-n-brand\/15 {
  --tw-gradient-from: rgb(235 94 40 / 0.15) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(235 94 40 / 0) var(--tw-gradient-to-position) !important;
}

.before\:bg-n-brand:before,
.after\:bg-n-brand:after {
  background-color: #EB5E28 !important;
}

/* Texto de acento e links: #A83C13 no Light (5.65:1 AA em Paper) / #EE7340 no Dark (6.63:1 AA em Ink) */
.text-n-brand,
.text-n-blue-9,
.text-link,
.hover\:text-n-brand:hover,
.group:focus-within .group-focus-within\:text-n-brand,
.prose-a\:text-n-brand :is(:where(a)),
.prose-strong\:text-n-brand :is(:where(strong)),
p a {
  color: #A83C13 !important;
}

.dark .text-n-brand,
.dark .text-n-blue-9,
.dark .text-link,
.dark\:hover\:text-n-brand:hover:is(.dark *),
.dark .prose-a\:text-n-brand :is(:where(a)),
.dark .prose-strong\:text-n-brand :is(:where(strong)),
p a:is(.dark *),
.dark p a {
  color: #EE7340 !important;
}

/* Bordas, aneis de foco e outlines (R3: filete de topo permitido, zero border-left) */
.border-n-brand,
.dark\:border-n-brand:is(.dark *),
.hover\:border-n-brand:hover,
.focus\:border-n-brand:focus,
.checked\:border-n-brand:checked,
.dark\:checked\:border-n-brand:checked:is(.dark *),
.indeterminate\:border-n-brand:indeterminate,
.search-input:focus {
  border-color: #EB5E28 !important;
}

.border-n-brand\/50 {
  border-color: rgb(235 94 40 / 0.5) !important;
}

.border-t-n-brand,
.before\:\!border-t-n-brand:before {
  border-top-color: #EB5E28 !important;
}

.ring-n-brand,
.dark\:ring-n-brand:is(.dark *),
.focus\:ring-n-brand:focus,
.focus-within\:ring-n-brand:focus-within,
.focus-visible\:ring-n-brand:focus-visible {
  --tw-ring-color: rgb(235 94 40 / var(--tw-ring-opacity, 1)) !important;
}

.outline-n-brand,
.\!outline-n-brand,
.dark\:\!outline-n-brand:is(.dark *),
.focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within,
.focus-visible\:outline-n-brand:focus-visible,
.dark\:focus\:outline-n-brand:focus:is(.dark *),
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *),
.has-\[\:focus\]\:outline-n-brand:has(:focus),
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *),
select:focus,
textarea:focus {
  outline-color: #EB5E28 !important;
}

/* ==========================================================================
   CAMADA C · TIPOGRAFIA, GEOMETRIA R0 (2px a 4px) E SCROLLBAR QUADRADA R7
   ========================================================================== */

html,
:host,
body,
.font-sans,
.font-inter,
.text-body-main,
.text-body-para,
.text-label,
.text-label-small,
.text-button {
  font-family: 'Aspekta', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-synthesis: none;
}

h1,
h2,
.font-interDisplay,
.text-heading-1,
.text-heading-2 {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.02em;
}

h3,
.text-heading-3 {
  font-family: 'Archivo', 'Aspekta', -apple-system, sans-serif !important;
}

code,
kbd,
samp,
pre,
.font-mono {
  font-family: 'Crato Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-synthesis: none;
}

::selection {
  background-color: #EB5E28;
  color: #0E0D09;
}

/* R0: Radius institucional 2px a 4px em botoes/inputs/cards; 0 em estruturais */
.rounded-sm {
  border-radius: 2px !important;
}

button,
input,
select,
textarea,
.rounded,
.rounded-md,
button.rounded-full {
  border-radius: 3px !important;
}

.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: 4px !important;
}

table,
th,
td,
hr {
  border-radius: 0 !important;
}

/* R7: Scrollbar quadrada da marca (somente ::-webkit-*, sem scrollbar-width/scrollbar-color) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #F4F2EC;
  box-shadow: inset 1px 0 0 #D9D4C9;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: #6E685D;
  border: 3px solid #F4F2EC;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #EB5E28;
}

::-webkit-scrollbar-corner {
  background: #F4F2EC;
}

.dark ::-webkit-scrollbar-track {
  background: #100E0A;
  box-shadow: inset 1px 0 0 #2B2820;
}

.dark ::-webkit-scrollbar-thumb {
  background: #948E81;
  border: 3px solid #100E0A;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #EB5E28;
}

.dark ::-webkit-scrollbar-corner {
  background: #100E0A;
}