/* =========================================================
   UTILIDADES QUE FALTAM NO BUILD DO DESIGN SYSTEM
   O css/ds/base.css é um build Tailwind já compilado: só contém
   as classes que o autor do DS usou. Toda utilidade usada aqui
   e ausente lá não tem regra nenhuma e é silenciosamente ignorada.
   Este arquivo repõe exatamente essas classes, com os mesmos
   valores que o Tailwind geraria. Carrega depois do base.css.

   Também re-tinge os tokens do DS para a paleta da ARH Serrana:
   o build veio com brand-sky azul (#91beeb), origem das bolinhas azuis.
   ========================================================= */
:root{
    --color-brand-sky:#FF6601;
    --color-brand-deep:#8A3A00;
    --color-black:#16202A;
    --color-grey-50:#F6F5F2;
    --color-grey-100:#ECE9E4;
    --color-grey-200:#DDD8D1;
}

.text-brand-sky{color:var(--color-brand-sky)}
.text-brand-deep{color:var(--color-brand-deep)}
.border-brand-sky{border-color:var(--color-brand-sky)}
.bg-\[\#16202A\]{background-color:#16202A}
.bg-black\/15{background-color:color-mix(in oklab, var(--color-black) 15%, transparent)}
.text-black\/55{color:color-mix(in oklab, var(--color-black) 55%, transparent)}
.text-white\/45{color:color-mix(in oklab, #fff 45%, transparent)}
.text-white\/50{color:color-mix(in oklab, #fff 50%, transparent)}
.text-white\/60{color:color-mix(in oklab, #fff 60%, transparent)}
.text-white\/75{color:color-mix(in oklab, #fff 75%, transparent)}
.hover\:text-brand-sky:hover{color:var(--color-brand-sky)}
.hover\:bg-grey-100:hover{background-color:var(--color-grey-100)}
.hover\:bg-grey-200\/60:hover{background-color:color-mix(in oklab, var(--color-grey-200) 60%, transparent)}
.hover\:bg-brand-sky\/90:hover{background-color:color-mix(in oklab, var(--color-brand-sky) 90%, transparent)}
.border-dashed{border-style:dashed}
.h-24{height:6rem}
.h-32{height:8rem}
.max-h-14{max-height:3.5rem}
.max-h-20{max-height:5rem}
.min-h-\[3em\]{min-height:3em}
.p-7{padding:1.75rem}
.pt-\[140px\]{padding-top:140px}
.py-1\.5{padding-block:.375rem}
.max-w-\[16ch\]{max-width:16ch}
.max-w-\[380px\]{max-width:380px}
.max-w-\[560px\]{max-width:560px}
.max-w-\[60ch\]{max-width:60ch}
.max-w-\[62ch\]{max-width:62ch}
.max-w-\[68ch\]{max-width:68ch}
.space-y-1\.5 > :not(:first-child){margin-top:.375rem}
.text-\[clamp\(2\.5rem\,4vw\,3\.5rem\)\]{font-size:clamp(2.5rem, 4vw, 3.5rem)}
.text-\[clamp\(2rem\,3vw\,2\.75rem\)\]{font-size:clamp(2rem, 3vw, 2.75rem)}
.text-\[clamp\(3rem\,5vw\,4\.5rem\)\]{font-size:clamp(3rem, 5vw, 4.5rem)}
.grid-cols-\[72px_minmax\(0\,1fr\)\]{grid-template-columns:72px minmax(0,1fr)}
.grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1fr\)_minmax\(0\,1\.4fr\)\]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr)}

@media (min-width:40rem){
    .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:48rem){
    .md\:grid-cols-\[210px_minmax\(0\,1fr\)\]{grid-template-columns:210px minmax(0,1fr)}
    .md\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1fr\)_minmax\(0\,1\.4fr\)\]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr)}
    .md\:p-10{padding:2.5rem}
    .md\:pt-\[168px\]{padding-top:168px}
}
@media (min-width:64rem){
    .lg\:gap-16{gap:4rem}
    .lg\:gap-20{gap:5rem}
    .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
    .lg\:grid-cols-\[320px_minmax\(0\,1fr\)\]{grid-template-columns:320px minmax(0,1fr)}
    .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.1fr\)\]{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
    .lg\:grid-cols-\[minmax\(0\,1fr\)_360px\]{grid-template-columns:minmax(0,1fr) 360px}
    .lg\:grid-cols-\[minmax\(0\,1fr\)_380px\]{grid-template-columns:minmax(0,1fr) 380px}
    .lg\:self-start{align-self:flex-start}
    .lg\:top-28{top:7rem}
}

/* ── seções em cor de marca ────────────────────────────────────────
   O build do DS não traz fundo para brand-deep nem para o pêssego,
   então 73% das seções do site acabavam no mesmo cinza. Com estes
   dois, o ritmo passa a alternar neutro, pêssego, foto e marca.
   Contraste medido: branco sobre #8A3A00 dá 7,87:1 e a tinta sobre
   #FFF0E6 dá 15,06:1. */
.bg-brand-deep{background-color:#8A3A00}
/* .bg-peach e .text-peach saíram em 08/09/2026: o pêssego não faz parte da
   identidade da ARH. Onde havia faixa pêssego agora há .bg-marca, no
   laranja oficial #FF6601 com tinta escura. */