/* MakerVane v1.0 component classes. Token values live in tokens.json / tokens.css. */
:root {
  --mv-font-heading: var(--font-heading);
  --mv-font-body: var(--font-body);
  --mv-motion: 180ms cubic-bezier(.2,0,0,1);
}
.mv-surface { color:var(--mv-ink); background:var(--mv-ivory); font:400 1rem/1.6 var(--mv-font-body); }
.mv-container { width:min(calc(100% - 40px),var(--mv-content-width)); margin-inline:auto; }
.mv-heading { font-family:var(--mv-font-heading); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
.mv-display { font-size:clamp(2.5rem,5vw,4rem); }
.mv-card { padding:var(--mv-space-24); border:var(--mv-border) solid var(--mv-line); border-radius:var(--mv-radius-card); background:var(--mv-white); }
.mv-button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--mv-control-height); padding:var(--mv-space-12) var(--mv-space-24); border:var(--mv-border-strong) solid transparent; border-radius:var(--mv-radius-button); background:var(--mv-teal); color:var(--mv-white); font:600 1rem/1.25 var(--mv-font-body); text-decoration:none; cursor:pointer; transition:background var(--mv-motion); }
.mv-button:hover { background:var(--mv-teal-hover); }
.mv-button--secondary { background:transparent; border-color:var(--mv-teal); color:var(--mv-teal); }
.mv-button--secondary:hover { background:var(--mv-mint); }
.mv-button:focus-visible,.mv-input:focus-visible { outline:var(--mv-focus-ring) solid var(--mv-teal); outline-offset:3px; box-shadow:0 0 0 3px var(--mv-white); }
.mv-button:disabled { background:var(--mv-line); color:var(--mv-muted); cursor:not-allowed; }
.mv-input { box-sizing:border-box; width:100%; min-height:var(--mv-control-height); padding:var(--mv-space-12) var(--mv-space-16); border:var(--mv-border) solid var(--mv-muted); border-radius:var(--mv-radius-input); background:var(--mv-white); color:var(--mv-ink); font:inherit; }
.mv-input[aria-invalid="true"] { border:var(--mv-border-strong) solid var(--mv-error); }
.mv-error { color:var(--mv-error); }
.mv-label { display:block; margin-bottom:var(--mv-space-8); font:600 .875rem/1.4 var(--mv-font-body); }
.mv-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--mv-gutter); }
@media(max-width:767px) { .mv-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mv-gutter-mobile);} .mv-card {padding:20px;} }
@media(prefers-reduced-motion:reduce) { .mv-button {transition:none;} }