/* Cast shared components — cross-template primitives used by more than one
   template (the brand button family + .wrap). Loaded on every front-end page
   and in the cast canvas, BEFORE per-template style.css so a template can
   extend/override. Brand design tokens (color/spacing/type/radius/shadow/
   ease/maxw/fonts) live in the theme style.css :root — one source of truth.
   Keep this sheet to genuinely shared components; template-specific
   composition stays in templates/<name>/style.css. */

/* ---- content width ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-6)}
@media (max-width:640px){.wrap{padding-inline:var(--space-4)}}

/* ---- buttons (brand pill) ---- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:13px 24px;
  border-radius:calc(var(--radius)*100);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--color-primary);color:var(--color-primary-text)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-primary) 86%,var(--color-text))}