@tailwind base;
@tailwind components;
@tailwind utilities;

/* =======================
   THEME TOKENS
   ======================= */
:root {
  --ring: rgba(99,102,241,.35);
  --glow-strong: 0 0 0 8px rgba(99,102,241,.18), 0 5px 30px rgba(99,102,241,.25);
  --glow-soft: 0 0 0 6px rgba(99,102,241,.12);
  --grad-1: linear-gradient(135deg,#7c3aed, #2563eb 40%, #10b981 100%);
  --grad-1-90: linear-gradient(90deg,#6366f1,#10b981);
  --bg-light: #ffffff;
  --bg-dark: #0b1020;
}
.dark:root {
  --ring: rgba(129,140,248,.35);
}

/* =======================
   BASIC UTILITIES
   ======================= */
.text-muted { @apply text-gray-600 dark:text-gray-300; }
.text-foreground { @apply text-gray-900 dark:text-gray-100; }

.btn-neo {
  @apply inline-flex items-center justify-center rounded-xl px-5 py-3
         font-semibold text-white bg-indigo-600 hover:bg-indigo-700
         ring-1 ring-indigo-500/40;
  box-shadow: var(--glow-strong);
}
.btn-ghost-neo {
  @apply inline-flex items-center justify-center rounded-xl px-5 py-3
         font-semibold border border-gray-300 dark:border-gray-700
         hover:bg-gray-100 dark:hover:bg-gray-900;
}
.btn-mini {
  @apply inline-flex items-center justify-center rounded-lg px-3 py-2
         text-xs font-semibold bg-indigo-600 text-white hover:bg-indigo-700;
}

.section { @apply py-16; }
.section-head { @apply text-center max-w-2xl mx-auto; }
.section-title { @apply text-3xl sm:text-4xl font-black; }
.section-sub { @apply mt-2 text-muted; }
/* renamed to avoid conflict with Tailwind utility .border-t */
.section-divider { @apply border-t border-gray-100 dark:border-gray-800; }

.link-neo { @apply text-indigo-600 hover:text-indigo-700 dark:text-indigo-400; }
.tag-badge {
  @apply bg-indigo-600/10 text-indigo-700 dark:text-indigo-300
         ring-1 ring-inset ring-indigo-600/20 rounded-full;
}

.glow-strong { box-shadow: var(--glow-strong); }
.glow-soft { box-shadow: var(--glow-soft); }

/* =======================
   HERO BACKGROUNDS
   ======================= */
.leonardo-hero {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(1200px 600px at 80% 10%, rgba(16,185,129,.14), transparent 60%),
    linear-gradient(to bottom, #ffffff, #f8fafc);
}
.dark .leonardo-hero {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(129,140,248,.16), transparent 60%),
    radial-gradient(1200px 600px at 80% 10%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(to bottom, #0b1020, #0b1020);
}

.neon-word {
  background: linear-gradient(90deg,#a78bfa,#60a5fa,#34d399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 40px rgba(99,102,241,.35);
}

.grad-underline {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 8px no-repeat;
  padding-bottom: 2px;
}

/* =======================
   GLASS + GRADIENT BORDERS (CROSS-BROWSER)
   ======================= */
/* Glass card */
.glass-neo {
  @apply rounded-2xl border border-white/20 dark:border-white/5
         bg-white/70 dark:bg-gray-900/60 backdrop-blur;
}

/* Gradient border WITHOUT -webkit-mask (works everywhere) */
.grad-border {
  border-radius: 1rem;                 /* match the element’s radius */
  border: 2px solid transparent;       /* required for border-box layer */
  background:
    linear-gradient(var(--bg-light), var(--bg-light)) padding-box,
    var(--grad-1-90) border-box;
}
.dark .grad-border {
  background:
    linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
    var(--grad-1-90) border-box;
}

/* Floating callout over preview */
.floating-neo {
  @apply absolute -bottom-6 -left-6 rounded-xl border border-white/20 dark:border-white/5
         bg-white/80 dark:bg-gray-900/80 backdrop-blur px-4 py-3 shadow-md;
}

/* KPI cards */
.kpi-neo { @apply rounded-xl p-4 border border-white/20 dark:border-white/5 bg-white/60 dark:bg-gray-900/50; }
.kpi-label { @apply text-sm text-muted; }
.kpi-value { @apply mt-1 text-2xl font-extrabold; }

/* Demo chart placeholder */
.demo-chart-neo {
  @apply h-40 rounded-xl;
  background: linear-gradient(180deg, rgba(124,58,237,.12), rgba(16,185,129,.08));
}

/* =======================
   STICKY SUB NAV
   ======================= */
.subnav { @apply bg-white/70 dark:bg-gray-950/70 backdrop-blur border-b border-gray-200/60 dark:border-gray-800/60; }
.subnav-list { @apply flex items-center gap-4 py-2; }
.subnav a { @apply text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400; }
.brand-strip { @apply inline-flex items-center gap-3 text-xs px-3 py-2 rounded-xl bg-white/60 dark:bg-gray-900/60 backdrop-blur; }
.brand-strip i { @apply text-gray-700 dark:text-gray-300; }

/* =======================
   FEATURES
   ======================= */
.feature-neo { @apply glass-neo grad-border p-6; }
.feature-icon { @apply text-2xl; }
.feature-title { @apply mt-3 font-semibold; }
.feature-text { @apply mt-2 text-muted; }

/* =======================
   GALLERY (MASONRY + HOVERS)
   ======================= */
.masonry { column-count: 2; column-gap: .75rem; }
@media (min-width:640px){ .masonry { column-count: 3; } }
@media (min-width:1024px){ .masonry { column-count: 4; } }
@media (min-width:1280px){ .masonry { column-count: 5; } }
@media (min-width:1536px){ .masonry { column-count: 6; } }
.masonry-item { break-inside: avoid; margin-bottom: .75rem; }

.image-card-neo {
  @apply relative block rounded-xl overflow-hidden
         border border-white/20 dark:border-white/5
         bg-white/70 dark:bg-gray-900/60 backdrop-blur;
}
.image-thumb-neo { @apply w-full h-auto transition duration-300 group-hover:scale-[1.02]; }
.image-overlay-neo { @apply absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition; }
.image-badge-neo { @apply absolute bottom-2 left-2 text-[10px] px-2 py-0.5 rounded bg-black/60 text-white; }
.prompt-line-neo { @apply px-2 py-2 text-xs text-muted truncate; }

/* Skeleton loader grid (for empty states) */
.skeleton-masonry { display:grid; grid-template-columns: repeat(2,1fr); gap:.75rem; }
@media (min-width:640px){ .skeleton-masonry { grid-template-columns: repeat(3,1fr);} }
@media (min-width:1024px){ .skeleton-masonry { grid-template-columns: repeat(4,1fr);} }
@media (min-width:1280px){ .skeleton-masonry { grid-template-columns: repeat(5,1fr);} }
@media (min-width:1536px){ .skeleton-masonry { grid-template-columns: repeat(6,1fr);} }
.skeleton-card {
  border-radius: .75rem; height: 12rem;
  background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.2), rgba(148,163,184,.12));
  background-size: 200% 100%; animation: shimmer 1.3s infinite linear;
}
@keyframes shimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }

/* =======================
   PRICING
   ======================= */
.plan-neo { @apply glass-neo grad-border p-6 relative; }
.plan-featured-neo { @apply ring-2 ring-indigo-500 shadow-xl; }
.plan-head { @apply flex items-baseline justify-between; }
.plan-title { @apply text-lg font-semibold; }
.plan-price { @apply text-3xl font-extrabold; }
.plan-period { @apply text-base font-medium text-muted; }
.plan-list { @apply mt-4 space-y-2 text-sm text-muted; }

/* =======================
   TABLES / PANELS (Admin & Dashboard)
   ======================= */
.panel-neo { @apply glass-neo grad-border p-4; }
.table-neo { @apply min-w-full text-sm; }
.table-neo thead { @apply bg-white/60 dark:bg-gray-900/40; }
.table-neo tbody { @apply divide-y divide-gray-100/60 dark:divide-gray-800/60; }

/* =======================
   AUTH PAGES (polish)
   ======================= */
.auth-card {
  @apply glass-neo grad-border p-8 max-w-md mx-auto;
}
.auth-input {
  @apply w-full rounded-xl border border-gray-300 dark:border-gray-700
         bg-white dark:bg-gray-900 px-4 py-2.5
         focus:outline-none focus:ring-2 focus:ring-indigo-500/50;
}
.auth-label { @apply text-sm font-medium; }
.auth-hint { @apply text-sm text-muted mt-1; }

/* =======================
   EMPTY & MISC
   ======================= */
.empty { @apply rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-12 text-center text-muted; }

/* =======================
   DARK MODE TOGGLER (optional)
   ======================= */
.toggle-dark {
  @apply inline-flex items-center gap-2 text-sm font-semibold px-3 py-2 rounded-lg
         border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900;
}