:root.user-theme {
  /* Core Palette - Light & airy approach */
  --primary: #7fa9ae; /* Medium Teal - primary brand */
  --primary-2: #244c5a; /* Darkest Teal - buttons & strong emphasis */
  --secondary:#244c5a;
  --accent: #4f868e; /* Dark Teal-green - interactive accents */
  --sky: #d9d9d6; /* Light Gray - dominant background color */
  --gray1: #b6cfd0; /* Light Teal - subtle borders */

  /* Theme Tokens */
  --bg: #f5f5f3; /* Warm off-white using gray tones */
  --panel: #ffffff; /* Pure white for clean panels */
  --text: #244c5a; /* Darkest teal for readability */
  --muted: #597f85; /* Muted teal for secondary text */
  --border: #b6cfd0; /* Light teal borders */

  /* Interactive Elements */
  --ok: #7fa9ae; /* Medium teal for success */
  --warn: #d4aa5c; /* Warm gold complement */
  --alert: #d77764; /* Soft coral for alerts */
  --mid: #9db3a1; /* Muted sage for mid-states */

  /* Icons */
  --icon-on-light: #7fa9ae; /* Medium teal icons */
  --icon-on-dark: #ffffff;
  --icon-muted: rgba(127, 169, 174, 0.75);
}

/* Top bar with light gray tint */
:root.user-theme .top-bar {
  background: linear-gradient(0deg, rgba(217, 217, 214, 0.24), rgba(255, 255, 255, 0.92));
  border-bottom: 1px solid var(--border);
}

:root.user-theme .brand {
  color: white;
}

:root.user-theme .menu-toggle,
:root.user-theme .menu-toggle i {
  color: var(--icon-on-light);
}

:root.user-theme .menu-toggle:hover {
  background: rgba(127, 169, 174, 0.12);
}

/* Sidebar with light gray gradient */
:root.user-theme .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, var(--sky) 100%);
  border-left: 1px solid var(--border);
}

:root.user-theme .sb-menu a {
  color: var(--text);
}

:root.user-theme .sb-menu a i {
  color: var(--icon-on-light);
}

:root.user-theme .sb-menu a:hover,
:root.user-theme .sb-menu a.active {
  background: rgba(127, 169, 174, 0.16);
  color: var(--primary-2);
}

:root.user-theme .sb-menu a:hover i,
:root.user-theme .sb-menu a.active i {
  color: var(--accent);
}

/* Hero with medium teal gradient */
:root.user-theme .hero {
  background: radial-gradient(1000px 320px at 85% -40%, rgba(127, 169, 174, 0.42), transparent 60%),
    radial-gradient(1000px 320px at 20% -60%, rgba(79, 134, 142, 0.36), transparent 60%), var(--hero-bg) center / cover
    no-repeat;
}

:root.user-theme .hero::after {
  background: linear-gradient(0deg, rgba(36, 76, 90, 0.6), rgba(127, 169, 174, 0.4));
}

/* Quote banner - accent to primary gradient */
:root.user-theme .quote-banner {
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border: 1px solid rgba(255, 255, 255, 0.5);
}

:root.user-theme .quick {
  background: var(--panel);
  border: 1px solid var(--border);
}

:root.user-theme .section-title {
  color: var(--primary-2);
}

:root.user-theme .section-title::after {
  background: var(--primary);
}

/* Action cards with light teal hover */
:root.user-theme .action {
  background: #ffffff;
  border: 1px solid var(--border);
}

:root.user-theme .action:hover {
  border-color: var(--primary);
  background: rgba(182, 207, 208, 0.08);
  box-shadow: 0 12px 32px rgba(79, 134, 142, 0.18);
}

/* Action icons - primary to accent gradient */
:root.user-theme .action i {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}

:root.user-theme .action h3 {
  color: var(--primary-2);
}

:root.user-theme .action p {
  color: var(--muted);
}

/* Stats with light gray background */
:root.user-theme .stats {
  background: linear-gradient(135deg, #ffffff 0%, rgba(217, 217, 214, 0.16) 100%);
  border: 1px solid var(--border);
}

:root.user-theme .stat h4 {
  color: var(--muted);
}

:root.user-theme .stat .val {
  color: var(--primary-2);
}

:root.user-theme .stat .ico {
  color: var(--primary);
  opacity: 0.14;
}

:root.user-theme .appointments {
  background: var(--panel);
  border: 1px solid var(--border);
}

:root.user-theme .appt {
  background: #fff;
  border: 1px solid var(--border);
}

:root.user-theme .appt:hover {
  box-shadow: 0 8px 24px rgba(127, 169, 174, 0.18);
  border-color: var(--primary);
}

:root.user-theme .appt-title {
  color: var(--primary-2);
}

:root.user-theme .appt-sub {
  color: var(--muted);
}

/* Date badge - dark teal primary-2 */
:root.user-theme .date {
  background: var(--primary-2);
  color: #fff;
}

/* Chips with updated colors */
:root.user-theme .chip.ok {
  background: rgba(127, 169, 174, 0.12);
  color: var(--primary);
  border: 1px solid rgba(127, 169, 174, 0.4);
}

:root.user-theme .chip.soon {
  background: rgba(212, 170, 92, 0.12);
  color: var(--warn);
  border: 1px solid rgba(212, 170, 92, 0.4);
}

:root.user-theme .chip.mid {
  background: rgba(157, 179, 161, 0.12);
  color: var(--mid);
  border: 1px solid rgba(157, 179, 161, 0.4);
}

:root.user-theme .chip.over {
  background: rgba(215, 119, 100, 0.12);
  color: var(--alert);
  border: 1px solid rgba(215, 119, 100, 0.4);
}

/* Footer - smooth gradient from dark to medium teal */
:root.user-theme .footer {
  background: linear-gradient(135deg, var(--primary-2) 0%, var(--accent) 50%, var(--primary) 100%);
}

:root.user-theme .btn-mini {
  background: #fff;
}

:root.user-theme .btn-mini:hover {
  background: rgba(182, 207, 208, 0.12);
}