/* ==========================================================================
   Vara SaaS — Dynamic CSS Variables
   Applies CSS custom properties from design system tokens.
   ========================================================================== */

/* ── Base font-family ── */
body,
button,
input,
select,
textarea {
  font-family: var(--vara-font-family, 'Inter', sans-serif);
}

/* ── Monospace font ── */
code,
pre,
kbd,
.vara-label,
.font-label-md {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
}

/* ── Base font size ── */
html {
  font-size: var(--vara-base-size, 16px);
}

/* ── Logo sizing ──
   Uses CSS variable set from Customizer (vara_saas_logo_width).
   !important + max-width needed to override style.css `img{max-width:100%}` and WP width/height attrs.
*/
.custom-logo-link img,
.custom-logo,
.vara-saas-logo img,
.vara-saas-logo .custom-logo {
  width: var(--vara-logo-width, 150px) !important;
  max-width: var(--vara-logo-width, 150px) !important;
  height: auto !important;
}