/* ==========================================================================
   TwoGees Universal Design Tokens & Clarity Engine (Light & Dark)
   Clean, modern Swiss-editorial layout system with zero visual clutter.
   ========================================================================== */

:root,
html[data-theme="light"],
html[data-theme="blue"],
html[data-theme="white"],
html[data-theme="clean"],
html:not([data-theme="dark"]) {
  color-scheme: light;
  --tg-bg: #F8FAFC;
  --tg-bg-subtle: #F1F5F9;
  --tg-surface: #FFFFFF;
  --tg-surface-card: #FFFFFF;
  --tg-surface-elevated: #F1F5F9;
  --tg-surface-subtle: #F8FAFC;
  --tg-surface-nav: rgba(255, 255, 255, 0.92);
  --tg-border: #E2E8F0;
  --tg-border-strong: #CBD5E1;
  --tg-border-light: #F1F5F9;
  --tg-text: #0F172A;
  --tg-text-secondary: #334155;
  --tg-text-muted: #64748B;
  --tg-text-subtle: #94A3B8;
  --tg-ink-title: #0F172A;
  --tg-ink-body: #334155;
  --tg-ink-muted: #64748B;
  --tg-brand: #2563EB;
  --tg-brand-hover: #1D4ED8;
  --tg-brand-active: #1E40AF;
  --tg-brand-surface: #EFF6FF;
  --tg-brand-border: #BFDBFE;
  --tg-brand-glow: rgba(37, 99, 235, 0.20);
  --tg-input-bg: #FFFFFF;
  --tg-input-border: #E2E8F0;
  --tg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --tg-shadow-card: 0 4px 20px -2px rgba(37, 99, 235, 0.05);
  --tg-shadow-nav: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --tg-bg: #070B12;
  --tg-bg-subtle: #0E1626;
  --tg-surface: #0E1626;
  --tg-surface-card: rgba(14, 22, 38, 0.88);
  --tg-surface-elevated: rgba(21, 34, 56, 0.92);
  --tg-surface-subtle: #152238;
  --tg-surface-nav: rgba(11, 18, 30, 0.90);
  --tg-border: rgba(255, 255, 255, 0.08);
  --tg-border-strong: rgba(255, 255, 255, 0.16);
  --tg-border-light: rgba(255, 255, 255, 0.05);
  --tg-text: #F8FAFC;
  --tg-text-secondary: #94A3B8;
  --tg-text-muted: #64748B;
  --tg-text-subtle: #64748B;
  --tg-ink-title: #F8FAFC;
  --tg-ink-body: #CBD5E1;
  --tg-ink-muted: #94A3B8;
  --tg-brand: #38BDF8;
  --tg-brand-hover: #0284C7;
  --tg-brand-active: #0369A1;
  --tg-brand-surface: rgba(56, 189, 248, 0.12);
  --tg-brand-border: rgba(56, 189, 248, 0.25);
  --tg-brand-glow: rgba(56, 189, 248, 0.25);
  --tg-input-bg: rgba(255, 255, 255, 0.04);
  --tg-input-border: rgba(255, 255, 255, 0.12);
  --tg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tg-shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
  --tg-shadow-nav: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}

/* Global body transition & base */
body {
  background-color: var(--tg-bg);
  color: var(--tg-text);
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic utility bridges with multi-layer variable fallbacks */
.bg-theme-canvas { background-color: var(--tg-bg, #F8FAFC) !important; }
.bg-theme-card { background-color: var(--tg-surface-card, #FFFFFF) !important; }
.bg-theme-elevated { background-color: var(--tg-surface-elevated, #F1F5F9) !important; }
.border-theme { border-color: var(--tg-border, #E2E8F0) !important; }
.border-theme-strong { border-color: var(--tg-border-strong, #CBD5E1) !important; }
.text-theme-main { color: var(--tg-text, #0F172A) !important; }
.text-theme-sub { color: var(--tg-text-secondary, #334155) !important; }
.text-theme-muted { color: var(--tg-text-muted, #64748B) !important; }

/* Navigation and floating bar */
.glass-nav {
  background: var(--tg-surface-nav) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--tg-border) !important;
  box-shadow: var(--tg-shadow-nav) !important;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Cards & Bento Grid elements */
.glass-card {
  background: var(--tg-surface-card) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--tg-border) !important;
  box-shadow: var(--tg-shadow-card) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-hover:hover {
  background: var(--tg-surface-elevated) !important;
  border-color: var(--tg-brand) !important;
  transform: translateY(-3px);
}

/* Theme Toggle Button Styling */
#themeToggleBtn,
.theme-toggle-btn {
  background: var(--tg-input-bg);
  border: 1px solid var(--tg-border);
  color: var(--tg-text-secondary);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#themeToggleBtn:hover,
.theme-toggle-btn:hover {
  border-color: var(--tg-brand);
  color: var(--tg-text);
  background: var(--tg-surface-elevated);
}

/* Brand Button with Luxury Glow */
.btn-glow-brand {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glow-brand:hover {
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: translateY(-1.5px);
}

/* ═════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES (Clean Modern Slate & Royal Blue)
   ═════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"],
html[data-theme="blue"],
html[data-theme="white"],
html:not([data-theme="dark"]) {
  /* Ambient hero mesh */
  .hero-mesh {
    background-image:
      radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
      radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 15% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  }

  /* Translucent dark utility replacements */
  .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
  .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.08); }
  .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.05); }
  .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06); }
  .border-white\/10 { border-color: var(--tg-border); }
  .border-white\/15 { border-color: var(--tg-border-strong); }
  .border-white\/20 { border-color: var(--tg-border-strong); }
  .divide-white\/10 > * + * { border-color: var(--tg-border); }
  .bg-black\/40 { background-color: rgba(15, 23, 42, 0.06); }

  /* Form controls & inputs */
  #librarySearchInput,
  #sortSelect {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
  }
  #librarySearchInput::placeholder { color: #94A3B8 !important; }
  #sortSelect option { background-color: #FFFFFF !important; color: #0F172A !important; }

  /* Filter pills */
  .filter-pill {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
  }
  .filter-pill:hover {
    border-color: #2563EB !important;
    color: #0F172A !important;
  }
  .filter-pill.active {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: #2563EB !important;
    color: #2563EB !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
  }

  /* Skeletons */
  .skeleton-box {
    background: linear-gradient(90deg, rgba(15,23,42,0.04) 25%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 75%) !important;
    background-size: 200% 100% !important;
  }

  /* Section backgrounds */
  section.border-b { border-color: var(--tg-border) !important; }
  footer { background-color: var(--tg-bg) !important; border-color: var(--tg-border) !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES (Obsidian canvas & Starlight ink)
   ═════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"],
html.dark {
  /* Surfaces */
  .bg-white:not(.on-light) {
    background-color: rgba(14, 22, 38, 0.88) !important;
  }
  .border-\[\#E8E2D9\],
  .border-\[\#E2E8F0\] {
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* Inputs in dark mode */
  #librarySearchInput,
  #sortSelect {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F8FAFC !important;
  }
  #librarySearchInput::placeholder { color: #64748B !important; }
  #sortSelect option { background-color: #0B101A !important; color: #F8FAFC !important; }

  /* Hero mesh: Deep atmospheric glow */
  .hero-mesh {
    background-image:
      radial-gradient(circle at 50% 10%, rgba(56, 189, 248, 0.15) 0%, transparent 60%),
      radial-gradient(circle at 85% 25%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
      radial-gradient(circle at 15% 45%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  }

  /* Filter pills in dark */
  .filter-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #94A3B8 !important;
  }
  .filter-pill:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: #F8FAFC !important;
  }
  .filter-pill.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(56, 189, 248, 0.20) 100%) !important;
    border-color: #38BDF8 !important;
    color: #F8FAFC !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3) !important;
  }

  footer { background-color: #070B12 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
}

/* Force white text on primary brand buttons or badges regardless of theme */
.on-dark,
.btn-glow-brand,
.btn-glow-brand * {
  color: #FFFFFF !important;
}

/* Product Card Universal Style */
.elite-card {
  background: var(--tg-surface-card);
  border: 1px solid var(--tg-border);
  box-shadow: var(--tg-shadow-card);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.elite-card:hover {
  border-color: var(--tg-brand);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -12px var(--tg-brand-glow);
}
.elite-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Accessibility & Focus Rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tg-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}