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

:root {
  --ds-brand-50:  #f6f2fb;
  --ds-brand-100: #e7dcf5;
  --ds-brand-300: #c3a5e6;
  --ds-brand-500: #9c7cb8;
  --ds-brand-600: #8a68a9;
  --ds-brand-700: #6f5090;
  --brand: #9c7cb8;
}

/* 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%, #241a2e 0%, #0f0b14 45%, #0b0a0f 100%) !important;
  background-attachment: fixed !important;
}