/* ============================================================
   MUBASHIR — STYLE GUIDE PAGE (styleguide.html)
   Loaded after base.css. Overrides a few base rules to suit
   the reference layout (narrower container, sticky nav).
============================================================ */

:root{--maxw:1080px}

mono,code{font-family:'JetBrains Mono';font-size:.82em}

/* ---------- Nav (sticky variant) ---------- */
.nav{position:sticky;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav .container{width:100%}
.nav-r{display:flex;gap:10px;align-items:center}

/* ---------- Buttons / atoms (reference variants) ---------- */
.btn-ghost{background:var(--surface-2)}
.chip{background:var(--surface-2)}
.pill{background:var(--surface-2)}

/* ---------- Hero ---------- */
.hero{padding:70px 0 40px;text-align:center}
.hero .eyebrow{margin-bottom:20px}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.hero p{color:var(--muted);max-width:560px;margin:18px auto 0;font-size:1.08rem}

/* ---------- Blocks ---------- */
.block{padding:44px 0;border-top:1px solid var(--border)}
.block > .container > h2{font-size:1.5rem;margin-bottom:6px}
.block .desc{color:var(--muted);margin-bottom:28px;font-size:.95rem}

/* ---------- Swatches ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.sw{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.sw .fill{height:78px}
.sw .info{padding:11px 13px}
.sw .info b{font-size:.85rem;display:block}
.sw .info span{font-family:'JetBrains Mono';font-size:.72rem;color:var(--faint)}
.grad-fill{background:var(--grad)}

/* ---------- Type scale ---------- */
.type-row{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px dashed var(--border)}
.type-row .lbl{font-family:'JetBrains Mono';font-size:.75rem;color:var(--faint);width:130px;flex:0 0 auto}
.d1{font-family:'Space Grotesk';font-weight:700;font-size:3rem;letter-spacing:-.03em}
.d2{font-family:'Space Grotesk';font-weight:600;font-size:2.1rem;letter-spacing:-.02em}
.d3{font-family:'Space Grotesk';font-weight:600;font-size:1.5rem}
.d4{font-family:'Space Grotesk';font-weight:600;font-size:1.15rem}
.body-l{font-size:1.1rem;color:var(--muted)}
.body-m{font-size:1rem;color:var(--muted)}
.body-s{font-size:.88rem;color:var(--muted)}

/* ---------- Component demos ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.demo{border:1px solid var(--border);border-radius:16px;padding:26px;background:var(--surface)}
.demo h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.field input{width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);outline:none;font-family:inherit}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow)}
.card-demo{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);transition:.3s var(--ease)}
.card-demo:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.card-demo .th{height:90px;background:linear-gradient(135deg,#FDBB2D,#FF6B4A)}
.card-demo .b{padding:16px}.card-demo .b b{font-size:.98rem}.card-demo .b p{color:var(--muted);font-size:.85rem;margin-top:6px}

/* ---------- Effects ---------- */
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fx{height:120px;border-radius:16px;display:grid;place-items:center;font-size:.85rem;color:var(--muted);text-align:center;padding:12px}
.fx.glass{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(10px)}
.fx.glow{background:var(--surface);border:1px solid var(--border);box-shadow:0 0 0 1px var(--border),0 20px 50px -20px var(--glow)}
.fx.gradient{background:var(--grad);color:#fff}
.fx.radii{background:var(--surface-2);border:1px solid var(--border);border-radius:26px}
.fx.shadow{background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow)}
.fx.border-anim{background:var(--surface);position:relative;border:1px solid var(--border)}

/* ---------- Tokens ---------- */
.tokens{font-family:'JetBrains Mono';font-size:.82rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;color:var(--muted);overflow-x:auto;line-height:1.9}
.tokens .k{color:var(--brand-3)}.tokens .v{color:var(--text)}

footer{border-top:1px solid var(--border);padding:34px 0;color:var(--faint);font-size:.86rem;text-align:center}

@media(max-width:720px){.grid2,.fx-grid{grid-template-columns:1fr}.type-row{flex-direction:column;gap:4px}.type-row .lbl{width:auto}}