/* ============================================================
   Flore DTC Theme — overrides clinical's teal palette with
   plum / cream / honey for consumer-facing portal.flore.com.
   Loaded AFTER flore-clinical.css so these win specificity.
   ============================================================ */

:root {
  /* Re-target clinical's teal tokens to plum so existing CSS picks up the new color
     without us having to retag every var(--teal) call site in the cloned HTML/JS. */
  --teal-deep:   #3D2840;
  --teal:        #5C3D5E;
  --teal-light:  #7A5A7D;
  --teal-glow:   #9B7A9E;
  --teal-dark:   #3D2840;
  --teal-darker: #2A1B2D;
  --teal-bg:     rgba(92, 61, 94, 0.08);
  --teal-shine:  rgba(155, 122, 158, 0.18);
  --teal-text:   #FAF6F1;

  /* Honey replaces clinical's brand-dot accent (was already honey-adjacent) */
  --brand-dot:      #D4956A;
  --brand-dot-deep: #B87B50;

  /* Slightly warmer cream than clinical's */
  --cream:      #FAF6F1;
  --cream-soft: #FFFBF2;
  --sand:       #F0E8DD;
  --sand-dark:  #E5DCD0;

  /* Semantic aliases for new DTC code */
  --plum:        #5C3D5E;
  --plum-deep:   #3D2840;
  --plum-light:  #7A5A7D;
  --honey:       #D4956A;
  --honey-light: #E8AB7B;
  --honey-deep:  #B87B50;
}

/* Glassmorphism polish for sidebar + cards (clinical already uses backdrop-filter
   in spots; we lean into it across the board for the consumer feel). */
.sidebar {
  background: linear-gradient(180deg, rgba(255,253,251,0.85) 0%, rgba(250,246,241,0.78) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(92, 61, 94, 0.08);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(92, 61, 94, 0.12), rgba(212, 149, 106, 0.08));
  color: var(--plum-deep);
  border-left: 3px solid var(--honey);
}

.card, .panel {
  background: rgba(255, 253, 251, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(92, 61, 94, 0.06);
}

/* Body background gets a subtle plum/cream gradient for the glass to read against */
body {
  background:
    radial-gradient(circle at 15% 10%, rgba(212, 149, 106, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(92, 61, 94, 0.10) 0%, transparent 50%),
    var(--cream);
  background-attachment: fixed;
}

/* Login card glass + plum accent line */
.login-card {
  background: rgba(255, 253, 251, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(92, 61, 94, 0.08);
  box-shadow: 0 30px 80px rgba(60, 40, 64, 0.12);
}

.login-accent {
  background: linear-gradient(90deg, var(--plum), var(--honey));
}

/* Buttons that previously read as teal now read as plum-with-honey-CTAs */
.btn-primary {
  background: linear-gradient(180deg, var(--plum) 0%, var(--plum-deep) 100%);
  color: white;
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--plum-light) 0%, var(--plum) 100%);
}
.btn-honey {
  background: linear-gradient(180deg, var(--honey) 0%, var(--honey-deep) 100%);
  color: white;
  border: none;
}