/* ============================================================
   StoreEy — Design Token Override Layer
   Dark / Light theme toggle + UI polish (Pre-Prod pass)
   ============================================================ */

/* ─── Light theme (default) ─────────────────────────────── */
:root,
[data-theme="light"] {
  --primary:         #5A31F4;
  --primary-hover:   #4822db;
  --primary-light:   #ece7fe;
  --accent:          #FF7E1D;
  --accent-hover:    #e56a0c;
  --accent-light:    #fff2e8;

  --bg-main:         #F8F9FC;
  --bg-card:         #FFFFFF;
  --bg-sidebar:      #FFFFFF;
  --bg-input:        #FFFFFF;
  --bg-hover:        #F1F5F9;
  --bg-overlay:      rgba(255, 255, 255, 0.85);

  --text-primary:    #181A20;
  --text-secondary:  #64748B;
  --text-muted:      #94A3B8;
  --text-inverse:    #FFFFFF;

  --border-color:    #E2E8F0;
  --border-focus:    #5A31F4;
  --border-subtle:   rgba(226, 232, 240, 0.6);

  --success:         #10B981;
  --success-light:   #D1FAE5;
  --warning:         #F59E0B;
  --warning-light:   #FEF3C7;
  --danger:          #EF4444;
  --danger-light:    #FEE2E2;

  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;

  --shadow-sm:       0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:       0 4px 14px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:       0 10px 30px rgba(90,49,244,.10), 0 4px 12px rgba(0,0,0,.05);
  --shadow-card:     0 2px 10px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
  --shadow-btn:      0 4px 14px rgba(90,49,244,.35);
  --shadow-accent:   0 4px 14px rgba(255,126,29,.35);

  --glass-bg:        rgba(255,255,255,0.88);
  --glass-border:    rgba(226,232,240,0.8);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* ─── Dark theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --primary:         #7C5AF6;
  --primary-hover:   #6A46F0;
  --primary-light:   rgba(124,90,246,0.15);
  --accent:          #FF8F35;
  --accent-hover:    #FF7E1D;
  --accent-light:    rgba(255,143,53,0.15);

  --bg-main:         #0F1117;
  --bg-card:         #1A1D27;
  --bg-sidebar:      #141720;
  --bg-input:        #1F2232;
  --bg-hover:        rgba(255,255,255,0.06);
  --bg-overlay:      rgba(15,17,23,0.90);

  --text-primary:    #F0F1F5;
  --text-secondary:  #9BA3B8;
  --text-muted:      #5C6478;
  --text-inverse:    #0F1117;

  --border-color:    rgba(255,255,255,0.09);
  --border-focus:    #7C5AF6;
  --border-subtle:   rgba(255,255,255,0.05);

  --success:         #34D399;
  --success-light:   rgba(52,211,153,0.15);
  --warning:         #FBBF24;
  --warning-light:   rgba(251,191,36,0.15);
  --danger:          #F87171;
  --danger-light:    rgba(248,113,113,0.15);

  --shadow-sm:       0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:       0 4px 14px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  --shadow-lg:       0 10px 30px rgba(0,0,0,.45), 0 4px 12px rgba(124,90,246,.2);
  --shadow-card:     0 2px 10px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2);
  --shadow-btn:      0 4px 14px rgba(124,90,246,.45);
  --shadow-accent:   0 4px 14px rgba(255,143,53,.40);

  --glass-bg:        rgba(26,29,39,0.92);
  --glass-border:    rgba(255,255,255,0.08);

  color-scheme: dark;
}

/* ─── Smooth theme transition on the entire page ────────── */
*,
*::before,
*::after {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Disable transition on interactive elements that need to feel instant */
button,
a,
[role="button"] {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

/* ─── Override hard-coded colours in the bundle ─────────── */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Cards & panels */
.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Glass header */
.glass-header {
  background: var(--glass-bg) !important;
  border-bottom-color: var(--glass-border) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* Inputs */
.input-field,
input[class*="input"],
textarea,
select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.input-field:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Buttons — full refinement */
.btn {
  min-height: 40px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md) !important;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast) !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97) !important; }
.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--primary) !important;
  box-shadow: var(--shadow-btn) !important;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 6px 20px rgba(90,49,244,.50) !important;
}

.btn-accent {
  background-color: var(--accent) !important;
  box-shadow: var(--shadow-accent) !important;
}
.btn-accent:hover {
  background-color: var(--accent-hover) !important;
}

.btn-secondary {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border-color) !important;
}
.btn-secondary:hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--text-muted) !important;
}

.btn-ghost {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
}
.btn-ghost:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Badges */
.badge-primary  { background-color: var(--primary-light) !important; color: var(--primary) !important; }
.badge-success  { background-color: var(--success-light) !important; color: var(--success) !important; }
.badge-warning  { background-color: var(--warning-light) !important; color: var(--warning) !important; }
.badge-danger   { background-color: var(--danger-light)  !important; color: var(--danger)  !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Dark-mode surface overrides ───────────────────────── */
[data-theme="dark"] .glass-header {
  box-shadow: 0 1px 0 var(--glass-border), 0 4px 16px rgba(0,0,0,.3);
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--bg-input) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Dark sidebar / dashboard panels */
[data-theme="dark"] [class*="sidebar"],
[data-theme="dark"] [class*="Sidebar"],
[data-theme="dark"] nav[class*="side"] {
  background-color: var(--bg-sidebar) !important;
  border-color: var(--border-color) !important;
}

/* Modal overlays */
[data-theme="dark"] [class*="modal"],
[data-theme="dark"] [class*="Modal"],
[data-theme="dark"] [class*="drawer"],
[data-theme="dark"] [class*="Drawer"] {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ─── Theme Toggle Button ────────────────────────────────── */
#storeey-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  outline: none;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md), 0 0 0 1.5px var(--border-color);

  font-size: 20px;
  line-height: 1;

  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast) !important;
}

#storeey-theme-toggle:hover {
  transform: scale(1.10) rotate(12deg);
  box-shadow: var(--shadow-lg);
}

#storeey-theme-toggle:active {
  transform: scale(0.95);
}

/* Tooltip */
#storeey-theme-toggle::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast) !important;
}

#storeey-theme-toggle:hover::before {
  opacity: 1;
}

/* ─── Animations ─────────────────────────────────────────── */
@keyframes storeeyFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes storeeySlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes storeeyPop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-fade-in    { animation: storeeyFadeIn  0.28s ease-out both; }
.animate-slide-in   { animation: storeeySlideIn 0.28s ease-out both; }
.animate-pop        { animation: storeeyPop     0.32s ease-out both; }

/* Staggered children */
.animate-fade-in:nth-child(1)  { animation-delay: 0.04s; }
.animate-fade-in:nth-child(2)  { animation-delay: 0.08s; }
.animate-fade-in:nth-child(3)  { animation-delay: 0.12s; }
.animate-fade-in:nth-child(4)  { animation-delay: 0.16s; }
.animate-fade-in:nth-child(5)  { animation-delay: 0.20s; }

/* ─── Responsive adjustments ────────────────────────────── */
@media (max-width: 768px) {
  #storeey-theme-toggle {
    bottom: 80px; /* clear mobile nav bars */
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  #storeey-theme-toggle::before {
    display: none; /* hide tooltip on mobile */
  }
}