/* ============================================================
   Milly Roams — themes & accent personalization (v52).
   Applied via data-theme / data-accent on <html>, set by the
   inline head script before CSS loads (no theme flash).
   ============================================================ */

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --plum: #7C3AED;
  --grape: #6D28D9;
  --amber: #D97706;
  --amber-dark: #B45309;
  --cream: #FAF6EE;        /* page background — warm paper */
  --ink: #2B1D4E;          /* body text */
  --white: #FFFFFF;        /* surfaces/cards */
  --line: #E4D9F3;         /* borders */
  --surface-2: #F2EBFB;    /* deeper surface */
  --bubble: #E9DFFB;       /* incoming chat bubble */
  --shadow: 0 4px 18px rgba(70, 40, 130, 0.12);
  --shadow-soft: 0 2px 8px rgba(70, 40, 130, 0.10);
}

/* Hardcoded dark surfaces from the base stylesheet, lightened: */
[data-theme="light"] .notif-panel { background: #FFFFFF; border-color: var(--line); }
[data-theme="light"] .notif-panel-head { border-bottom-color: var(--line); }
[data-theme="light"] .btn-ghost { background: #F1EAFB; color: #4C1D95; }
[data-theme="light"] .btn-ghost:hover { background: #E4D6F8; color: #4C1D95; }
[data-theme="light"] .chat-form input { background: #F7F2E9; border-color: var(--line); color: var(--ink); }
[data-theme="light"] .chat-toast-text { color: var(--grape); }
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  background: #FFFFFF; color: var(--ink); border-color: var(--line);
}
[data-theme="light"] .pf-avatar-xs.avatar-initial,
[data-theme="light"] .avatar-initial { background: #E4D6F8; color: #5B21B6; }
[data-theme="light"] .empty-state { color: #6B5B8E; }
[data-theme="light"] .msg-item { border-bottom-color: var(--line); color: var(--ink); }
[data-theme="light"] .msg-item:hover { background: #F4EEFC; }
[data-theme="light"] .msg-unread-n { color: #A21CAF; }

/* ---------- Accent colors (work on both themes) ---------- */
[data-accent="teal"]   { --plum: #0E9488; }
[data-accent="rose"]   { --plum: #E11D48; }
[data-accent="blue"]   { --plum: #2563EB; }
[data-accent="amber"]  { --plum: #D97706; }
[data-theme="light"][data-accent="teal"]  { --grape: #0F766E; }
[data-theme="light"][data-accent="rose"]  { --grape: #BE123C; }
[data-theme="light"][data-accent="blue"]  { --grape: #1D4ED8; }
[data-theme="light"][data-accent="amber"] { --grape: #B45309; }