/* ============================================================
   Paraná Consórcios — Página de Design System
   ============================================================ */
.ds-main { padding-top: calc(var(--header-h) + 8px); }
.ds-hero { padding: clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--cream-50), var(--paper)); }
.ds-hero h1 { font-size: var(--fs-3xl); }
.ds-hero p { margin-top: var(--sp-4); max-width: 60ch; }

.ds-layout { display: grid; grid-template-columns: 200px 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
.ds-toc { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.ds-toc a { font-size: var(--fs-sm); color: var(--ink-500); padding: 8px 12px; border-radius: var(--r-sm); border-left: 2px solid transparent; transition: all var(--dur-fast); }
.ds-toc a:hover { color: var(--brand); background: var(--green-50); }
@media (max-width: 860px) { .ds-layout { grid-template-columns: 1fr; } .ds-toc { display: none; } }

.ds-section { padding-block: clamp(32px,5vw,56px); border-bottom: 1px solid var(--line); }
.ds-section:last-child { border-bottom: none; }
.ds-section > .ds-label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.ds-section > h2 { font-size: var(--fs-2xl); margin: 8px 0 var(--sp-2); }
.ds-section > .ds-desc { color: var(--ink-500); max-width: 64ch; margin-bottom: var(--sp-6); }

/* swatches */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.ds-swatch { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.ds-swatch .sw-color { height: 80px; }
.ds-swatch .sw-meta { padding: 10px 12px; }
.ds-swatch .sw-name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); }
.ds-swatch .sw-hex { font-size: var(--fs-xs); color: var(--ink-400); font-family: var(--font-mono, monospace); text-transform: uppercase; }
.ds-swatch .sw-var { font-size: var(--fs-xs); color: var(--ink-400); }

/* type samples */
.ds-type-row { display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ds-type-row:last-child { border: none; }
.ds-type-meta { width: 130px; flex-shrink: 0; }
.ds-type-meta b { font-size: var(--fs-sm); color: var(--ink-900); display: block; }
.ds-type-meta span { font-size: var(--fs-xs); color: var(--ink-400); }
.ds-type-sample { color: var(--ink-900); }

.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 720px) { .ds-grid-2, .ds-grid-3 { grid-template-columns: 1fr; } }

.ds-demo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.ds-demo-label { font-size: var(--fs-xs); color: var(--ink-400); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ds-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* spacing */
.ds-space-row { display: flex; align-items: center; gap: var(--sp-4); padding: 8px 0; }
.ds-space-bar { height: 18px; background: var(--green-300); border-radius: 3px; }
.ds-space-row span { font-size: var(--fs-sm); color: var(--ink-600); }
.ds-space-row .sp-token { font-family: var(--font-mono, monospace); color: var(--ink-400); font-size: var(--fs-xs); width: 80px; }

/* radius + shadow */
.ds-radius { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ds-radius .r-box { width: 100%; height: 80px; background: var(--green-50); border: 1.5px solid var(--green-300); }
.ds-radius span { font-size: var(--fs-xs); color: var(--ink-500); }
.ds-shadow { background: var(--paper); border-radius: var(--r-lg); height: 90px; display: flex; align-items: flex-end; padding: 12px; }
.ds-shadow span { font-size: var(--fs-xs); color: var(--ink-400); }

.ds-logo-demo { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ds-logo-card { flex: 1; min-width: 220px; border-radius: var(--r-lg); padding: var(--sp-6); display: flex; align-items: center; justify-content: center; }
.ds-logo-card.light { background: var(--paper); border: 1px solid var(--line); }
.ds-logo-card.dark { background: var(--green-950); }
.ds-logo-card .logo img { width: 44px; }
.ds-logo-card.dark .logo-text b { color: #fff; }
.ds-logo-card.dark .logo-text span { color: var(--gold-400); }
.ds-clearspace { position: relative; padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); display: inline-block; }