/* ============================================================================
   design-system.css — estilos só da página /design-system/ (galeria viva).
   Mostra tokens, tipografia, componentes e blocos copiáveis. Reutiliza os
   tokens globais (tokens.css) e os componentes .wdt-* (components.css).
   ============================================================================ */

/* Secções da galeria */
.ds-section { padding-block: var(--sp-5) 0; }
.ds-section + .ds-section { border-top: 1px solid var(--wdt-line); margin-top: var(--sp-5); }
.ds-section__title { font-size: var(--t-h2); }
.ds-section__hint { margin-top: 8px; max-width: 64ch; color: var(--wdt-ink-soft); font-size: var(--t-small); }
.ds-rowlabel { margin: var(--sp-3) 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wdt-ink-muted); }
.ds-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Swatches de cor (clica → copia o hex) ── */
.ds-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-swatch {
    width: 168px; text-align: left; cursor: pointer;
    background: var(--wdt-surface); border: 1px solid var(--wdt-line);
    border-radius: var(--r-lg); padding: 0; overflow: hidden; color: inherit;
    font: inherit; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ds-swatch:hover { border-color: var(--wdt-line-2); transform: translateY(-2px); }
.ds-swatch__chip { display: block; height: 76px; border-bottom: 1px solid var(--wdt-line); }
.ds-swatch__meta { display: block; padding: 10px 12px 12px; }
.ds-swatch__name { display: block; font-size: 13px; font-weight: 700; color: var(--wdt-ink); }
.ds-swatch__hex { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--wdt-ink-soft); }

/* Bloco do gradiente-assinatura */
.ds-gradient-block {
    display: block; width: 100%; max-width: 560px; cursor: pointer;
    border: none; border-radius: var(--r-lg); padding: 26px 22px; text-align: left;
    background: var(--wdt-gradient); color: #fff;
    font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
    box-shadow: var(--sh-action-red);
}

/* ── Escalas (espaçamento / raios / sombras) ── */
.ds-tokrow { display: flex; align-items: center; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--wdt-line); }
.ds-tokrow__name { width: 130px; flex: 0 0 130px; font-size: 13px; font-weight: 700; color: var(--wdt-ink); }
.ds-tokrow__name code { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--wdt-ink-muted); }
.ds-bar { height: 16px; border-radius: 3px; background: var(--wdt-gradient); }
.ds-radii-box { width: 72px; height: 72px; background: var(--wdt-surface-tint); border: 1px solid var(--wdt-line-2); }
.ds-shadow-box { width: 110px; height: 68px; background: var(--wdt-surface); border-radius: var(--r-md); }

/* ── Ícones ── */
.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.ds-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px 12px; border: 1px solid var(--wdt-line); border-radius: var(--r-lg); background: var(--wdt-surface); cursor: pointer; color: inherit; font: inherit; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ds-icon-cell:hover { border-color: var(--wdt-line-2); transform: translateY(-2px); }
.ds-icon-cell .wdt-icon { color: var(--wdt-accent); }
.ds-icon-cell small { font-family: var(--font-mono); font-size: 11px; color: var(--wdt-ink-muted); }

/* ── Tipografia ── */
.ds-type-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-4); padding: 18px 0; border-bottom: 1px solid var(--wdt-line); align-items: baseline; }
.ds-type-row__meta { font-size: 12px; color: var(--wdt-ink-muted); }
.ds-type-row__meta b { display: block; font-size: 13px; color: var(--wdt-ink); }
.ds-type-row__sample { color: var(--wdt-ink); line-height: 1.15; }

/* ── Blocos de código copiáveis ── */
.ds-code { border: 1px solid var(--wdt-line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-3); background: var(--wdt-surface); }
.ds-code__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--wdt-line); }
.ds-code__title { font-size: 13px; font-weight: 700; color: var(--wdt-ink); }
.ds-code__note { margin-top: 3px; font-size: 12px; color: var(--wdt-ink-muted); }
.ds-code pre {
    margin: 0; padding: 16px; overflow-x: auto;
    background: var(--wdt-surface-tint);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--wdt-ink);
    white-space: pre;
}

/* Botão "Copiar" (pequeno, sóbrio) */
.ds-copy {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    font-size: 12px; font-weight: 700;
    padding: 7px 14px; border-radius: var(--r-pill);
    background: var(--wdt-surface); color: var(--wdt-accent);
    border: 1px solid var(--wdt-accent);
    transition: background-color var(--dur) var(--ease);
}
.ds-copy:hover { background: var(--wdt-surface-tint); }
.ds-copy.is-done { color: #2faa56; border-color: #2faa56; }

/* ── Brand gradients (secção) ── */
.ds-callout-rule { display: flex; gap: 14px; margin: var(--sp-3) 0; padding: 16px 18px; border-radius: var(--r-lg); background: var(--wdt-tint-success); border: 1px solid #bfe6cd; }
.ds-callout-rule__icon { font-size: 20px; line-height: 1.4; flex: 0 0 auto; }
.ds-callout-rule__title { font-weight: 700; color: #157a3e; margin-bottom: 2px; }
.ds-callout-rule p { font-size: var(--t-small); color: var(--wdt-ink-soft); line-height: 1.55; }
.ds-callout-rule code { font-family: var(--font-mono); font-size: 12px; background: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 4px; }
.ds-grad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ds-grad-tile { cursor: pointer; text-align: left; padding: 0; overflow: hidden; background: var(--wdt-surface); border: 1px solid var(--wdt-line); border-radius: var(--r-lg); color: inherit; font: inherit; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ds-grad-tile:hover { border-color: var(--wdt-line-2); transform: translateY(-2px); }
.ds-grad-tile__swatch { display: block; height: 56px; border-bottom: 1px solid var(--wdt-line); }
.ds-grad-tile__label { display: block; padding: 9px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--wdt-ink-soft); }

/* ── Logos (secção) ── */
.ds-logos { display: flex; flex-wrap: wrap; gap: 16px; }
.ds-logos__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 150px; flex: 1; padding: 28px 20px; border: 1px solid var(--wdt-line); border-radius: var(--r-lg); background: var(--wdt-surface); }
.ds-logos__cell small { font-family: var(--font-mono); font-size: 11px; color: var(--wdt-ink-muted); }

/* ── App components (secção) ── */
.ds-appfoot { margin-top: 14px; padding: 12px 24px; text-align: right; font-size: 11px; color: var(--wdt-ink-muted); border-top: 1px solid var(--wdt-line); }
.ds-modal-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-3); align-items: start; }

@media (max-width: 640px) {
    .ds-type-row { grid-template-columns: 1fr; gap: 8px; }
}