/* =========================================================
   Brand Enforcement Layer
   Purpose: force all user-facing surfaces to the approved
   SakuMi palette + typography system.
   ========================================================= */

:root {
  --success: var(--rose, #c17a66);
  --warning: var(--blush, #deb8a0);
  --error: var(--deep-rose, #a05a48);
  --info: var(--mid, #5a4438);
}

html,
body {
  font-family: var(--sans, 'Outfit', sans-serif) !important;
  color: var(--deep, #1e1612);
  background: var(--cream, #faf8f4);
}

body {
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif, 'Playfair Display', Georgia, serif) !important;
  font-weight: 400 !important;
  color: var(--deep, #1e1612) !important;
  letter-spacing: -0.01em;
}

p,
li,
span,
label,
small,
input,
textarea,
select {
  color: var(--mid, #5a4438);
  font-weight: 300;
}

.muted,
.subtle,
.auth-tagline,
.visa-muted,
.footer-copy {
  color: var(--muted, #8c6e62) !important;
}

.btn,
button,
.tab-btn,
.nav-item,
.btn-primary,
.btn-secondary,
.btn-cta,
.cta-sm {
  font-family: var(--sans, 'Outfit', sans-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

.btn-primary,
.primary-btn,
.btn-cta,
.cta-sm,
.upgrade-btn,
.btn-save-names,
.btn-progress-primary,
.billing-plan-btn.upgrade,
.visa-btn-primary {
  color: var(--off-white, #fdf9f4) !important;
  border-color: transparent !important;
  background: linear-gradient(
    135deg,
    rgba(222, 184, 160, 0.95),
    rgba(193, 122, 102, 0.95)
  ) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.btn-cta:hover,
.cta-sm:hover,
.upgrade-btn:hover,
.btn-save-names:hover,
.btn-progress-primary:hover,
.billing-plan-btn.upgrade:hover,
.visa-btn-primary:hover {
  background: linear-gradient(
    135deg,
    rgba(193, 122, 102, 0.98),
    rgba(160, 90, 72, 0.98)
  ) !important;
}

.btn-secondary,
.btn-magic,
.billing-plan-btn.downgrade,
.visa-btn-secondary {
  background: var(--off-white, #fdf9f4) !important;
  border-color: var(--border, rgba(180, 140, 120, 0.18)) !important;
  color: var(--mid, #5a4438) !important;
}

.nav-item.tab-btn.active {
  color: var(--deep, #1e1612) !important;
  background: rgba(222, 184, 160, 0.28) !important;
}

.nav-item.tab-btn.active::before {
  background: linear-gradient(
    180deg,
    var(--rose, #c17a66) 0%,
    var(--deep-rose, #a05a48) 100%
  ) !important;
}

.feature-card,
.stat-card,
.plan-card,
.billing-card,
.profile-selector-content,
.pin-modal {
  background: var(--off-white, #fdf9f4) !important;
  border-color: var(--border, rgba(180, 140, 120, 0.18)) !important;
}

.status-active,
.status-trialing,
.status-paid,
.partner-online {
  background: rgba(222, 184, 160, 0.22) !important;
  color: var(--mid, #5a4438) !important;
}

.status-past-due,
.status-canceled,
.status-unpaid,
.status-incomplete {
  background: rgba(193, 122, 102, 0.2) !important;
  color: var(--deep-rose, #a05a48) !important;
}

.online-dot {
  background: var(--rose, #c17a66) !important;
  border-color: var(--off-white, #fdf9f4) !important;
}

.bg-orbs,
.cta-glow {
  background:
    radial-gradient(circle at 15% 20%, rgba(242, 235, 224, 0.62), transparent 42%),
    radial-gradient(circle at 85% 25%, rgba(222, 184, 160, 0.38), transparent 44%),
    radial-gradient(circle at 55% 80%, rgba(193, 122, 102, 0.2), transparent 46%) !important;
}

#quick-action-btn span{
  color: #fff !important;
}

.user-avatar .material-symbols-outlined.kuc-icon-host {
  color: #fff !important;
}

.auth-logo-image {
  width: 300px !important;
}