/* ============================================================
   public/css/themes.css
   Hệ thống theme – nhúng sau main.css, trước theme-connectvietnam.css
   ============================================================ */

/* ── DEFAULT: Connect Vietnam (teal) ─────────────────────── */
:root {
  --th-primary:   #289E8E;
  --th-light:     #36B793;
  --th-dark:      #238483;
  --th-darker:    #1A6B6B;
  --th-bg:        #EAF7F4;
  --th-bg2:       #D0EFE9;
  --th-grad:      linear-gradient(135deg, #36B793 0%, #238483 100%);
  --th-grad-h:    linear-gradient(135deg, #3BC99E 0%, #27918F 100%);
  --th-shadow:    rgba(40,158,142,.32);
  --th-admin-sb:  #0F4D4D;
  --th-footer:    #0A3D3D;
}

/* ── THEME: Warm Orange ───────────────────────────────────── */
[data-theme="orange"] {
  --th-primary:   #FF6B35;
  --th-light:     #FF8C5A;
  --th-dark:      #E55A2B;
  --th-darker:    #C44A20;
  --th-bg:        #FFF3EC;
  --th-bg2:       #FFE4D0;
  --th-grad:      linear-gradient(135deg, #FF8C5A 0%, #E55A2B 100%);
  --th-grad-h:    linear-gradient(135deg, #FFA070 0%, #F06030 100%);
  --th-shadow:    rgba(255,107,53,.35);
  --th-admin-sb:  #4A1B0C;
  --th-footer:    #3A1208;
}

/* ── THEME: Ocean Blue ────────────────────────────────────── */
[data-theme="blue"] {
  --th-primary:   #2563EB;
  --th-light:     #3B82F6;
  --th-dark:      #1D4ED8;
  --th-darker:    #1E40AF;
  --th-bg:        #EFF6FF;
  --th-bg2:       #DBEAFE;
  --th-grad:      linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --th-grad-h:    linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  --th-shadow:    rgba(37,99,235,.35);
  --th-admin-sb:  #1E3A8A;
  --th-footer:    #1E3A8A;
}

/* ── THEME: Creative Purple ───────────────────────────────── */
[data-theme="purple"] {
  --th-primary:   #7C3AED;
  --th-light:     #8B5CF6;
  --th-dark:      #6D28D9;
  --th-darker:    #5B21B6;
  --th-bg:        #F5F3FF;
  --th-bg2:       #EDE9FE;
  --th-grad:      linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --th-grad-h:    linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  --th-shadow:    rgba(124,58,237,.35);
  --th-admin-sb:  #2E1065;
  --th-footer:    #1E0A4E;
}

/* ── THEME: Sakura Pink ───────────────────────────────────── */
[data-theme="pink"] {
  --th-primary:   #DB2777;
  --th-light:     #EC4899;
  --th-dark:      #BE185D;
  --th-darker:    #9D174D;
  --th-bg:        #FDF2F8;
  --th-bg2:       #FCE7F3;
  --th-grad:      linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
  --th-grad-h:    linear-gradient(135deg, #F472B6 0%, #DB2777 100%);
  --th-shadow:    rgba(219,39,119,.35);
  --th-admin-sb:  #500724;
  --th-footer:    #3B0A1A;
}

/* ── Apply theme variables globally ──────────────────────── */
/* Override tất cả --or, --orl bằng theme vars */
:root,
[data-theme] {
  --or:  var(--th-primary);
  --orl: var(--th-light);
  --bg:  color-mix(in srgb, var(--th-bg) 30%, #fff 70%);
  --bo:  color-mix(in srgb, var(--th-bg2) 80%, transparent 20%);
  --sh:  0 4px 24px var(--th-shadow);
  --shl: 0 12px 48px var(--th-shadow);
}

/* Buttons */
.btn-primary, .bp, .ep-export-btn {
  background: var(--th-grad) !important;
  box-shadow: 0 4px 14px var(--th-shadow) !important;
}
.btn-primary:hover { background: var(--th-grad-h) !important; }

.btn-ghost { color: var(--th-primary) !important; border-color: var(--th-primary) !important; }
.btn-ghost:hover { background: var(--th-primary) !important; color: #fff !important; }

/* Nav */
.nav-logo { color: var(--th-dark) !important; }
.nav-dd-item:hover { background: var(--th-bg) !important; color: var(--th-dark) !important; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--th-bg) 0%, var(--th-bg2) 100%) !important; }
.b1 { background: color-mix(in srgb, var(--th-light) 40%, #fff) !important; }
.b2 { background: color-mix(in srgb, var(--th-primary) 50%, #fff) !important; }
.b3 { background: color-mix(in srgb, var(--th-bg2) 80%, #fff) !important; }
.hl { background: var(--th-grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.hero-badge { background: var(--th-bg) !important; color: var(--th-dark) !important; border-color: var(--th-primary) !important; }

/* Cards */
.frame-card:hover { border-color: var(--th-primary) !important; }
.cat-btn.active, .cat-btn:hover,
.filter-chip.active, .filter-chip:hover,
.sort-btn.active, .sort-btn:hover,
.page-btn.active, .page-btn:hover { background: var(--th-primary) !important; border-color: var(--th-primary) !important; color:#fff !important; }

/* Forms */
.form-control:focus { border-color: var(--th-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-primary) 15%, transparent) !important; }
input[type=range] { accent-color: var(--th-primary) !important; }
input[type=checkbox] { accent-color: var(--th-primary) !important; }

/* Spinner */
.spinner { border-top-color: var(--th-primary) !important; }

/* Toast */
.toast.success { background: var(--th-primary) !important; }
.toast.info    { background: var(--th-dark)    !important; }

/* Profile */
.profile-header { background: linear-gradient(135deg, var(--th-bg), var(--th-bg2)) !important; }
.profile-avatar { background: var(--th-grad) !important; }
.pstat-num { color: var(--th-dark) !important; }

/* Dashboard */
.dash-header { background: linear-gradient(135deg, var(--th-bg), var(--th-bg2)) !important; }
.stat-num { color: var(--th-dark) !important; }
.tab-btn.active { color: var(--th-primary) !important; border-bottom-color: var(--th-primary) !important; }

/* Editor */
.ep-frame-item.active { border-color: var(--th-primary) !important; }
.ep-tbtn.act, .ep-tbtn:hover { border-color: var(--th-primary) !important; background: var(--th-bg) !important; color: var(--th-dark) !important; }
.ep-ubtn { border-color: var(--th-primary) !important; background: var(--th-bg) !important; color: var(--th-dark) !important; }
.upload-dropzone { border-color: var(--th-primary) !important; background: var(--th-bg) !important; }

/* Admin sidebar */
.admin-sb { background: var(--th-admin-sb) !important; }
.admin-sb-item.active { background: color-mix(in srgb, var(--th-light) 20%, transparent) !important; color: var(--th-light) !important; border-left-color: var(--th-light) !important; }
.admin-bottom-nav { background: var(--th-admin-sb) !important; }
.admin-bottom-nav-item.active { color: var(--th-light) !important; }

/* Footer */
.footer { background: var(--th-footer) !important; }
.footer-logo { color: var(--th-light) !important; }
.footer-links a:hover { color: var(--th-light) !important; }

/* Notification */
.notif-item.unread { background: var(--th-bg) !important; }
.notif-dot { background: var(--th-primary) !important; }

/* Auth pages */
.auth-logo a { color: var(--th-dark) !important; }
.auth-footer a { color: var(--th-primary) !important; }

/* Search */
.search-hero { background: linear-gradient(135deg, var(--th-bg), var(--th-bg2)) !important; }
.search-big { border-color: var(--th-primary) !important; }
.search-submit { background: var(--th-grad) !important; }

/* Mobile hamburger */
.mobile-menu-link.primary { background: var(--th-grad) !important; }
.mobile-frame-picker-btn { background: var(--th-grad) !important; }

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--th-bg2) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--th-primary) !important; }