/* =====================================================================
   Design System — USE-CASE PRESETS  v0.3.0
   Thin layers on the SAME core (tokens + base). Pick one per build by
   putting the preset class on a wrapper. They only adjust layout, rhythm,
   and a few preset-only extras — never the brand/token identity.
       doc      → walkthroughs, BRDs, client docs, handovers
       dash     → dashboards, internal tools, admin panels
       web      → marketing sites, landing pages, proposals
   Import after tokens.css + base.css. Ships in @layer ds.presets.
   ===================================================================== */

@layer ds.presets{
/* ===================== shared extra: scroll-progress bar ============== */
.ds-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:var(--grad-signature);transition:width .1s linear}

/* ============================ DOC / WALKTHROUGH ====================== */
/* Reading-optimized. Pair with a sticky left/side TOC (.ds-navitem). */
.preset-doc{--content-max:720px;--lh:var(--lh-prose)}
.preset-doc .prose{max-width:var(--content-max);margin:0 auto;font-size:var(--fs-16);line-height:var(--lh-prose);color:var(--c-txt)}
.preset-doc .prose h1{font-family:var(--font-display);font-size:var(--fs-36);letter-spacing:var(--tracking-display);margin:0 0 var(--sp-4)}
.preset-doc .prose h2{font-family:var(--font-display);font-size:var(--fs-24);letter-spacing:-.01em;margin:var(--sp-10) 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--c-line)}
.preset-doc .prose h3{font-size:var(--fs-18);font-weight:var(--fw-semi);margin:var(--sp-6) 0 var(--sp-2)}
.preset-doc .prose p{margin:0 0 var(--sp-4)}  /* measure lives on .prose (the column), NOT the <p> — keeps body text the same width as sibling images/tables/headings instead of narrower */
.preset-doc .prose a{color:var(--c-accent);text-underline-offset:2px}
.preset-doc .prose ul,.preset-doc .prose ol{margin:0 0 var(--sp-4);padding-left:1.4em}
.preset-doc .prose li{margin:.3em 0}
.preset-doc .prose img,.preset-doc .prose figure img{max-width:100%;border-radius:var(--r);border:1px solid var(--c-line);display:block}
.preset-doc .prose figcaption{color:var(--c-muted);font-size:var(--fs-13);margin-top:6px;text-align:center}
.preset-doc .prose blockquote{margin:var(--sp-4) 0;padding:4px 0 4px 16px;border-left:3px solid var(--c-line-2);color:var(--c-txt-2)}
.preset-doc .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:6px;padding:1px 6px}
.preset-doc .prose pre{font-family:var(--font-mono);font-size:var(--fs-13);background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);overflow:auto}
.preset-doc .prose hr{border:none;border-top:1px solid var(--c-line);margin:var(--sp-8) 0}

/* ============================ DASHBOARD ============================== */
/* Dense, scannable. Use with a sidebar (.ds-navitem) + .ds-kpi grid + .ds-table. */
.preset-dash{--lh:1.45}
.preset-dash .ds-card{padding:var(--sp-3) var(--sp-4)}
.preset-dash .grid-kpi{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.preset-dash .toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.preset-dash main,.preset-dash .content{max-width:none;padding:var(--sp-5) var(--sp-6)}

/* ========================= WEBSITE / LANDING ======================== */
/* Generous rhythm, big display type, hero + feature grid + pill CTAs. */
.preset-web{--content-max:1120px}
.preset-web .container{max-width:var(--content-max);margin:0 auto;padding-inline:var(--sp-6)}
.preset-web section{padding-block:var(--sp-16)}
.preset-web .hero{padding:var(--sp-16) 0 var(--sp-12);text-align:center}
.preset-web .hero h1{font-family:var(--font-display);font-size:clamp(var(--fs-30),6vw,var(--fs-44));line-height:1.05;letter-spacing:-.025em;margin:0 0 var(--sp-4)}
.preset-web .hero .grad{background:var(--grad-signature);-webkit-background-clip:text;background-clip:text;color:transparent}
.preset-web .hero p{font-size:var(--fs-18);color:var(--c-txt-2);max-width:60ch;margin:0 auto var(--sp-6)}
.preset-web .features{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.preset-web .eyebrow{display:inline-block;color:var(--c-accent);font-weight:var(--fw-semi);font-size:var(--fs-13);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2)}
/* optional subtle grain for dark hero — borrowed from wiki-dashboard */
.preset-web .grain{position:relative;isolation:isolate}
.preset-web .grain::after{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:overlay;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
}