/* BrandCheck Pro — Central Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-main: #0B0F19;
  --bg-surface: #1E293B;
  --brand-blue: #2563EB;
  --brand-cyan: #06B6D4;
  --brand-neon: #38BDF8;
  --border-color: rgba(255, 255, 255, 0.05);
}

/* Hide Alpine-controlled elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Base Settings */
body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ─── Dark Mode Canvas ───────────────────────────────────────── */
body.dark {
  background-color: #0B0F19;
  color: #F1F5F9;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}

/* ─── Light Mode Canvas (Premium Elevation) ──────────────────── */
body:not(.dark) {
  background-color: #F8FAFC;
  color: #1E293B;
  /* Razor-sharp blueprint grid — ultra-low opacity */
  background-image: 
    linear-gradient(rgba(37, 99, 235, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}

/* Light-mode panel elevation — elegant white card surfaces */
body:not(.dark) .glass-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(226, 232, 240, 0.8); /* border-slate-200/80 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* shadow-sm */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Light-mode card hover — lift with neon accent */
body:not(.dark) .glass-card:hover {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 4px 16px -4px rgba(37, 99, 235, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Light-mode primary text readability */
body:not(.dark) .text-slate-100,
body:not(.dark) .text-slate-200,
body:not(.dark) .text-slate-300 {
  color: #1e293b; /* map to text-slate-800 in light */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

code, pre {
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Glassmorphism Container — Dark Default ─────────────────── */
.glass-card {
  background: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 12px 30px -10px rgba(56, 189, 248, 0.15);
  transform: translateY(-2px);
}

/* ─── Collapsible Transitions ────────────────────────────────── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}

.accordion-content.open {
  max-height: 500px;
  opacity: 1;
}

/* ─── Fade-in Animation for Auth Modal ──────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}