/*
 * /design — vitrine do design system.
 *
 * Regra desta folha: ela não define cor nem tipo novo. Só monta a grade que
 * expõe o que main.css já decidiu. Se algo aqui precisar de um valor literal
 * que não seja token, é sinal de que o token está faltando lá.
 *
 * A página carrega estudos.css junto de propósito: o card da seção Componentes
 * é o card real de /estudos/, com as mesmas classes, não uma cópia.
 */

.ds {
    max-width: 100%;
}

.ds__titulo {
    margin: 4rem 0 0.5rem;
    padding-top: 1.5rem;
    border-top: var(--line-width) solid var(--border-color);
    font-size: 1.5rem;
    font-weight: 500;
}

.ds__sub {
    margin: 2.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.ds__nota {
    max-width: 68ch;
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ds__nota--peq {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* Cores ------------------------------------------------------------------ */

.ds-tabela {
    border: var(--line-width) solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.ds-tabela__cab,
.ds-linha {
    display: grid;
    grid-template-columns: 3rem minmax(11rem, 1fr) 6rem 6rem minmax(12rem, 1.4fr);
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    min-width: 42rem;
}

.ds-tabela__cab {
    border-bottom: var(--line-width) solid var(--border-color);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.ds-linha + .ds-linha {
    border-top: var(--line-width) solid var(--border-color);
}

.ds-cor {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--line-width) solid var(--border-color);
}

.ds-linha code {
    font-size: 0.8rem;
    background: none;
    padding: 0;
}

.ds-hex {
    color: var(--text-tertiary);
}

.ds-uso {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Tipografia ------------------------------------------------------------- */

.ds-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1px;
    border: var(--line-width) solid var(--border-color);
    margin-bottom: 1.5rem;
}

.ds-tipo__bloco {
    background: var(--bg-primary);
    padding: 1.5rem;
}

.ds-tipo__rot,
.ds-marca__rot,
.ds-peca__rot {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.ds-tipo__amostra {
    margin: 0 0 0.75rem;
}

.ds-tipo__amostra--h1 { font-size: 2.5rem; font-weight: 500; line-height: 1.15; }
.ds-tipo__amostra--h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.25; }
.ds-tipo__amostra--h3 { font-size: 1.125rem; font-weight: 500; }

.ds-tipo__amostra--serif {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.7;
}

.ds-tipo__amostra--peq {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* O fio entre as células é outline, não fundo do container atrás de gap: com
   fundo, a última linha incompleta da grade vira um bloco cinza. Outline não
   ocupa espaço, então os fios de duas células vizinhas caem dentro do mesmo
   gap de 1px e se sobrepõem em um traço só. */
.ds-tipo__bloco,
.ds-marca__item,
.ds-kit__item,
.ds-peca {
    outline: var(--line-width) solid var(--border-color);
}

/* Logos ------------------------------------------------------------------ */

.ds-marca {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    border: var(--line-width) solid var(--border-color);
    margin-bottom: 1.5rem;
}

.ds-marca__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 9rem;
    padding: 1.5rem 1rem;
    background: var(--bg-primary);
    text-align: center;
}

/* O favicon claro é desenhado para fundo branco: mostra ele no fundo dele. */
.ds-marca__item--claro {
    background: var(--white);
}

.ds-marca__item--claro .ds-marca__rot {
    color: #999999;
}

.ds-marca__svg {
    width: 64px;
    height: 64px;
    color: var(--text-primary);
}

.ds-marca__img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.ds-marca__img--peq {
    width: 40px;
    height: 40px;
}

.ds-marca__rot {
    margin: 0;
    font-size: 0.7rem;
}

.ds-kit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1px;
    border: var(--line-width) solid var(--border-color);
    margin-bottom: 1rem;
}

.ds-kit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 7rem;
    padding: 1.25rem 0.5rem;
    background: var(--bg-primary);
}

.ds-kit__item svg {
    width: 28px;
    height: 28px;
}

/* Os SVG do kit são fill="currentColor", igual ao deck: basta dar a cor do
   texto e eles acompanham o tema sozinhos, sem filter: invert(). */
.ds-kit__item > svg {
    color: var(--text-primary);
}

.ds-kit__item em {
    font-style: normal;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* Aviação mantém as cores e proporções originais de cada marca. */
.ds-kit--aviacao {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.ds-kit--aviacao .ds-kit__item > svg {
    width: auto;
    height: 32px;
    max-width: 100%;
    color: var(--text-primary);
}

/* Componentes ------------------------------------------------------------ */

.ds-demo {
    margin-bottom: 2rem;
}

.ds-demo .projects-grid {
    grid-template-columns: minmax(0, 22rem);
}

.ds-pecas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1px;
    border: var(--line-width) solid var(--border-color);
}

.ds-peca {
    background: var(--bg-primary);
    padding: 1.5rem;
}

.ds-peca p {
    margin: 0;
    font-size: 0.9rem;
}

.ds-peca blockquote {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--quote-border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Mapa ------------------------------------------------------------------- */

.ds-mapa {
    border: var(--line-width) solid var(--border-color);
}

.ds-mapa__item {
    display: grid;
    grid-template-columns: minmax(12rem, 20rem) 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.7rem 1rem;
}

.ds-mapa__item + .ds-mapa__item {
    border-top: var(--line-width) solid var(--border-color);
}

.ds-mapa__item code {
    font-size: 0.8rem;
    background: none;
    padding: 0;
}

.ds-mapa__item span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .ds-mapa__item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}