/* ProjectX42 — minimal premium design system (light default, dark via .dark) */

[x-cloak] { display: none !important; }

:root {
  --accent: #2563EB;
  --paper: #F7F7F5;
  --ink: #111111;
  --mute: #6B7280;
  --night: #0E0E10;
  --card-dark: #161619;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .5);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: border-color .25s ease, transform .25s ease, color .25s ease, background .25s ease;
}
.btn-secondary:hover { border-color: rgba(0, 0, 0, 0.45); transform: translateY(-1px); }
.dark .btn-secondary { color: #e4e4e7; border-color: rgba(255, 255, 255, 0.15); }
.dark .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }

/* ---------- Cards ---------- */
.glass-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 1.25rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -14px rgba(17, 17, 17, 0.14);
}
.dark .glass-card { background: var(--card-dark); border-color: rgba(255, 255, 255, 0.07); }
.dark .glass-card:hover { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65); border-color: rgba(255, 255, 255, 0.14); }

.icon-chip {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.07);
  color: var(--ink);
  transition: color .3s ease, border-color .3s ease;
}
.glass-card:hover .icon-chip { color: var(--accent); border-color: rgba(37, 99, 235, 0.35); }
.dark .icon-chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: #d4d4d8; }

/* ---------- Text accent (was gradient) ---------- */
.text-gradient { color: var(--accent); }

/* ---------- Popular pricing card ---------- */
.card-popular {
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 10px 34px -14px rgba(37, 99, 235, 0.35);
  position: relative;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.revealed { opacity: 1; transform: none; }

/* ---------- Subtle background grid for page headers ---------- */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
  pointer-events: none;
}
.dark .grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* ---------- Hero canvas (unused on minimal pages, kept harmless) ---------- */
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; }

/* ---------- Floating action buttons ---------- */
.float-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.float-btn:hover { transform: translateY(-3px); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 1.5rem; width: max-content; animation: marquee-scroll 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* ---------- Prose (blog markdown), theme aware ---------- */
.prose-dark { color: #374151; line-height: 1.8; }
.prose-dark h1, .prose-dark h2, .prose-dark h3 { color: var(--ink); font-weight: 700; margin: 1.75em 0 .6em; }
.prose-dark h2 { font-size: 1.5rem; }
.prose-dark h3 { font-size: 1.25rem; }
.prose-dark p { margin: 1em 0; }
.prose-dark a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-dark code { background: rgba(0, 0, 0, 0.06); padding: .15em .4em; border-radius: .35em; font-size: .9em; }
.prose-dark pre { background: #F3F4F6; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: .75rem; padding: 1rem 1.25rem; overflow-x: auto; margin: 1.25em 0; }
.prose-dark pre code { background: none; padding: 0; }
.prose-dark ul, .prose-dark ol { padding-left: 1.5em; margin: 1em 0; }
.prose-dark ul { list-style: disc; }
.prose-dark ol { list-style: decimal; }
.prose-dark blockquote { border-left: 3px solid var(--accent); padding-left: 1.25em; color: var(--mute); font-style: italic; margin: 1.5em 0; }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose-dark th, .prose-dark td { border: 1px solid rgba(0, 0, 0, 0.09); padding: .6em 1em; text-align: left; }
.prose-dark img { border-radius: .75rem; max-width: 100%; }
.dark .prose-dark { color: #d4d4d8; }
.dark .prose-dark h1, .dark .prose-dark h2, .dark .prose-dark h3 { color: #fff; }
.dark .prose-dark code { background: rgba(255, 255, 255, 0.08); }
.dark .prose-dark pre { background: #131316; border-color: rgba(255, 255, 255, 0.07); }
.dark .prose-dark th, .dark .prose-dark td { border-color: rgba(255, 255, 255, 0.08); }

/* =========================================================
   Light-mode remapping of legacy dark utility classes used
   across inner templates, so both themes render correctly.
   ========================================================= */
html:not(.dark) .text-white,
html:not(.dark) .text-zinc-100 { color: #111827; }
html:not(.dark) .text-zinc-200,
html:not(.dark) .text-zinc-300 { color: #374151; }
html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-500 { color: #6B7280; }
html:not(.dark) .text-zinc-600 { color: #9CA3AF; }
html:not(.dark) .text-zinc-700 { color: #D1D5DB; }
html:not(.dark) .hover\:text-white:hover,
html:not(.dark) .hover\:text-zinc-300:hover { color: #111827; }
html:not(.dark) .text-accent-cyan,
html:not(.dark) .text-accent-blue,
html:not(.dark) .text-accent-blue\/80 { color: var(--accent); }

html:not(.dark) .bg-zinc-900\/70 { background-color: #ffffff; }
html:not(.dark) .border-zinc-800 { border-color: #E5E7EB; }
html:not(.dark) .placeholder-zinc-500::placeholder { color: #9CA3AF; }

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/\[0\.03\] { background-color: rgba(0, 0, 0, 0.04); }
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10 { border-color: rgba(0, 0, 0, 0.08); }
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.04); }
html:not(.dark) .bg-surface\/30 { background-color: #ffffff; }
html:not(.dark) .bg-base\/95,
html:not(.dark) .bg-base\/70 { background-color: rgba(247, 247, 245, 0.9); }

/* Soft image placeholders keep a faint tint in both themes */
html:not(.dark) .from-accent-blue\/10 { --tw-gradient-from: rgba(37, 99, 235, 0.06) var(--tw-gradient-from-position); }

/* ---------- Focus states (a11y) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: .375rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}