/* ═══════════════════════════════════════════════════════════════════
   Aivisory Design System – shared across all pages
   Complements Tailwind CDN; do not duplicate Tailwind utilities here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  /* Typography families */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Manrope', sans-serif;

  /* Centralized typography scale based on hero section */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: clamp(1.875rem, 3.2vw, 2.5rem);
  --font-4xl: clamp(2.5rem, 6vw, 4.5rem);
  --font-copy-lead: 1rem;
  --font-copy-section: 1rem;
  --font-copy-body: 1rem;

  /* Highlight palette */
  --hl-start: #b6a0ff;
  /* primary purple */
  --hl-end: #00e3fd;
  /* secondary cyan */
}

/* ── Semantic Typography Mapping ───────────────────────────────── */

body {
  font-size: var(--font-base);
}

h1 {
  font-size: var(--font-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-3xl);
  line-height: 1.15;
}

h3 {
  font-size: var(--font-2xl);
  line-height: 1.2;
}

h4 {
  font-size: var(--font-xl);
  line-height: 1.25;
}

h5 {
  font-size: var(--font-lg);
  line-height: 1.3;
}

h6 {
  font-size: var(--font-base);
  line-height: 1.35;
}

p {
  font-size: var(--font-copy-body);
  line-height: 1.6;
}

button,
label {
  font-size: var(--font-sm);
}

small,
caption {
  font-size: var(--font-xs);
}

/* Token mapping for common Tailwind text-size utilities */
.text-xs {
  font-size: var(--font-xs);
}

.text-sm {
  font-size: var(--font-sm);
}

.text-base {
  font-size: var(--font-base);
}

.text-lg {
  font-size: var(--font-lg);
}

.text-xl {
  font-size: var(--font-xl);
}

.text-2xl {
  font-size: var(--font-2xl);
}

.text-3xl {
  font-size: var(--font-3xl);
}

.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl,
.md\:text-4xl,
.md\:text-5xl,
.md\:text-6xl,
.md\:text-7xl,
.lg\:text-8xl {
  font-size: var(--font-4xl);
}

.hero-paragraph {
  font-size: var(--font-copy-lead);
}

/* Paragraph scale follows parent heading hierarchy */
h1 + p,
.hero-paragraph {
  font-size: var(--font-copy-lead);
}

h2 + p {
  font-size: var(--font-copy-section);
}

h3 + p,
h4 + p,
h3 + ul + p,
h4 + ul + p {
  font-size: var(--font-copy-body);
}

/* Keep paragraph copy consistent even when utility classes are present */
p.text-xs,
p.text-sm,
p.text-base,
p.text-lg,
p.text-xl {
  font-size: var(--font-copy-body);
}

@media (max-width: 768px) {
  p,
  p.text-xs,
  p.text-sm,
  p.text-base,
  p.text-lg,
  p.text-xl {
    font-size: var(--font-copy-body);
    line-height: 1.65;
  }
}

button,
a[class*="px-"][class*="py-"][class*="rounded"] {
  font-size: var(--font-base);
}

/* Keep header/nav actions smaller than page CTAs */
nav button,
nav a[class*="px-"][class*="py-"][class*="rounded"] {
  font-size: var(--font-sm);
}


/* ── Text Highlight System ─────────────────────────────────────── */

/*
  Usage rules:
  - .text-gradient / .hl  → key feature words in body copy (gradient)
  - .hl-primary           → UI labels, accent text (flat purple)
  - .hl-secondary         → action/CTA labels (flat cyan)
  - Never use <strong> alone for emphasis — wrap in one of the above
*/

.text-gradient,
.hl {
  background: linear-gradient(135deg, var(--hl-start) 0%, var(--hl-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hl-primary {
  color: #b6a0ff;
}

.hl-secondary {
  color: #00e3fd;
}


/* ── Shared Glass / Backdrop Utilities ─────────────────────────── */

.glass-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-card {
  background: rgba(24, 25, 32, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ── Shared Background Utilities ───────────────────────────────── */

.hero-mesh {
  background-image:
    radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(255, 91%, 71%, 0.15) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(185, 100%, 49%, 0.10) 0, transparent 50%);
}


/* ── Partner Logo Section ──────────────────────────────────────── */

.white-filter {
  filter: brightness(0) invert(1);
}

.partner-logo {
  filter: grayscale(1) invert(1) brightness(1.02) contrast(1.08);
  mix-blend-mode: screen;
  display: block;
}


/* ── Clickable Case Images ─────────────────────────────────────── */

/*
  Wrap the image container <div> with <a class="case-img-link ...">
  to make the entire image clickable with the same target as the button.
*/

.case-img-link {
  display: block;
  cursor: pointer;
  overflow: hidden;
  /* keeps border-radius on the zoomed image */
  text-decoration: none;
}

.case-img-link img {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s ease;
}

.case-img-link:hover img {
  transform: scale(1.04);
  opacity: 0.88;
}

.case-img-link:focus-visible {
  outline: 2px solid #b6a0ff;
  outline-offset: 3px;
  border-radius: 1rem;
}


/* ── Responsive Images ─────────────────────────────────────────── */

/* Prevent layout shift before images load */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Subtle placeholder colour for lazy images */
/* img[loading="lazy"] {
  background-color: #181920;
} */