/* Paletas 60 / 30 / 10: 60% folha branca, 30% moldura e texto, 10% cor de ação (+ um destaque) */
:root { --moldura: #1F1410; }
:root[data-paleta="desafogai"] { --moldura: #0A1033; --brasa: #0131CD; --brasa-esc: #0029B3; --brasa-fundo: #0029B3; --gema: #B9FC01; --tinta: #0A1033; --tinta-2: #4A5175; --tinta-3: #636A8C; }
:root[data-paleta="coral"] { --moldura: #0F172A; --brasa: #E5484D; --brasa-esc: #C93A3F; --brasa-fundo: #C93A3F; --gema: #FFB224; --tinta: #0F172A; --tinta-2: #55607A; --tinta-3: #5F6880; }
:root[data-paleta="ouro"] { --moldura: #1C1917; --brasa: #A16207; --brasa-esc: #854D0E; --brasa-fundo: #854D0E; --gema: #E9C46A; --tinta: #1C1917; --tinta-2: #6B625B; --tinta-3: #776D65; }
:root[data-paleta="grafite"] { --moldura: #111214; --brasa: #EA580C; --brasa-esc: #C2410C; --brasa-fundo: #C2410C; --gema: #FACC15; --tinta: #18181B; --tinta-2: #5E5E66; --tinta-3: #6B6B73; }

/* escolha de paleta (Ajustes) */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.paleta { display: grid; gap: 10px; padding: 12px; border-radius: 20px; border: 2px solid var(--linha); background: #fff; text-align: left; transition: border-color .15s, transform .12s var(--sair); }
.paleta:active { transform: scale(.98); }
.paleta[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
.paleta-amostra { position: relative; display: grid; grid-template-columns: 30% 1fr; height: 96px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.paleta-amostra .m { background: var(--pm); }
.paleta-amostra .f { background: #fff; display: grid; align-content: center; gap: 6px; padding: 10px; }
.paleta-amostra .f i { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .08); }
.paleta-amostra .f i:first-child { width: 70%; background: var(--pt); opacity: .8; }
.paleta-amostra .f em { justify-self: start; width: 56%; height: 18px; border-radius: 6px; background: var(--pa); }
.paleta-amostra .d { position: absolute; left: 10px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--pd); }
.paleta b { font: 700 15px var(--f-titulo); }
.paleta small { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }
.paleta-barra { display: grid; grid-template-columns: 6fr 3fr 1fr; height: 8px; border-radius: 4px; overflow: hidden; }
.paleta-barra span:nth-child(1) { background: #F1F1F1; } .paleta-barra span:nth-child(2) { background: var(--pm); } .paleta-barra span:nth-child(3) { background: var(--pa); }