/* ===== Sage Smart Home — MiroTalk brand overrides =====
   Loads after _tokens.css / landing.css / login.css, so this wins.
   Drop at: /opt/mirotalk/ssh/public/brand/brand.css */

:root {
  --ds-brand-50:  #eef3ef;
  --ds-brand-100: #d6e3d8;
  --ds-brand-300: #9fbfa6;
  --ds-brand-500: #6f9077;
  --ds-brand-600: #5c7d64;
  --ds-brand-700: #48634f;
  --brand: #6f9077;
}

/* Accent — login page styles these directly, so force them */
.button.button-primary, .button-primary,
.login-btn, .join-room-btn,
#loginButton, #joinSelectRoomButton {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.login-icon { background: var(--brand) !important; }

/* Logo inside the login card icon + (on landing) the header */
.login-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.site-header img { height: 40px; width: auto; }

/* Background — remove MiroTalk's swirl, lay down a subtle brand gradient */
.illustration-section-01::before,
.illustration-section-01::after,
.hero.illustration-section-01 { background-image: none !important; }

body, .body-wrap {
  background: radial-gradient(1200px 600px at 50% 0%, #12202a 0%, #0f1419 45%, #0b0d10 100%) !important;
  background-attachment: fixed !important;
}