@layer base, components, utilities;
:where([data-scope]){ --ink:#0f172a; --muted:#64748b; --card:#ffffff; --accent:#0ea5e9; --ring: rgb(14 165 233 / .35); --radius:20px; color:var(--ink); }
:where([data-scope]) *,:where([data-scope]) *::before,:where([data-scope]) *::after{ box-sizing:border-box; }
:where([data-scope]) .card{ background:var(--card); border-radius:var(--radius); box-shadow:0 12px 30px rgba(2,6,23,.08); border:1px solid rgba(2,6,23,.06); padding:clamp(16px,2vw,28px); }
:where([data-scope]) .grid{ display:grid; gap:clamp(12px,2vw,24px); grid-template-columns:repeat(var(--cols,12), minmax(0,1fr)); }
:where([data-scope]) .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.9em 1.2em; font-weight:600; border-radius:9999px; border:1px solid rgba(2,6,23,.08); }
:where([data-scope]) .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 0 0 0 var(--ring); transition:box-shadow .2s ease, transform .12s ease; }
:where([data-scope]) .btn-primary:hover{ box-shadow:0 0 0 6px var(--ring); transform:translateY(-1px); }