/**
 * Link Mahal — global design tokens & typography (frontend-design skill).
 * Marketing + shared patterns. Storefront uses StoreTheme per store.
 */

@import url('lm-buttons.css');

:root {
  --lm-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --lm-font-body: 'IBM Plex Sans', system-ui, sans-serif;

  --lm-ink: #0c1222;
  --lm-ink-soft: #334155;
  --lm-paper: #ffffff;
  --lm-cream: #faf8f5;
  --lm-mist: #f1f5f9;

  --lm-accent: #0d9488;
  --lm-accent-bright: #14b8a6;
  --lm-accent-deep: #0f766e;
  --lm-accent-muted: rgba(13, 148, 136, 0.12);

  --lm-warm: #b45309;
  --lm-warm-soft: #f59e0b;
  --lm-warm-muted: rgba(180, 83, 9, 0.1);

  --lm-border: #e2e8f0;
  --lm-border-soft: #f1f5f9;

  --lm-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.05);
  --lm-shadow-md: 0 8px 24px rgba(12, 18, 34, 0.07);
  --lm-shadow-lg: 0 24px 48px rgba(12, 18, 34, 0.1);

  --lm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lm-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* Vertical rhythm — sections & pages */
  --lm-space-section-y: clamp(3.75rem, 7vw, 5.25rem);
  --lm-space-section-y-loose: clamp(4.25rem, 8vw, 5.75rem);
  --lm-space-section-y-tight: clamp(3rem, 5.5vw, 4rem);
  /* Outer margin on each homepage section (breathing room between blocks) */
  --lm-space-section-margin-y: clamp(2rem, 4vw, 3rem);
  --lm-space-section-gap: clamp(3.75rem, 7vw, 5.25rem);
  /* Overlap zone where adjacent section gradients merge */
  --lm-gradient-bridge: clamp(3.5rem, 7vw, 6rem);
  --lm-space-head-bottom: clamp(2rem, 4vw, 3rem);
  --lm-space-block: clamp(1.25rem, 2.5vw, 1.75rem);
  --lm-space-hero-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  --lm-space-stats-overlap: clamp(-2.25rem, -3.5vw, -1.25rem);
  --lm-space-container-x: 1.25rem;

  /* Align legacy landing vars */
  --lm-navy: var(--lm-ink);
  --lm-navy-mid: #1e293b;
  --lm-green: var(--lm-accent-bright);
  --lm-green-dark: var(--lm-accent-deep);
  --lm-text: var(--lm-ink-soft);
  --lm-muted: #64748b;
  --lm-white: var(--lm-paper);
  --lm-cream-legacy: var(--lm-cream);
  --lm-warm-legacy: #c9a574;
  --lm-font: var(--lm-font-body);
  --lm-ease: var(--lm-ease-out);
}

/* Grain overlay utility */
.lm-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Staggered hero / section reveal */
.lm-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: lm-reveal-up 0.75s var(--lm-ease-out) forwards;
}

.lm-reveal--1 { animation-delay: 0.05s; }
.lm-reveal--2 { animation-delay: 0.12s; }
.lm-reveal--3 { animation-delay: 0.2s; }
.lm-reveal--4 { animation-delay: 0.28s; }
.lm-reveal--5 { animation-delay: 0.36s; }
.lm-reveal--6 { animation-delay: 0.44s; }

@keyframes lm-reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-page,
.marketing-body {
  font-family: var(--lm-font-body);
  color: var(--lm-ink-soft);
  -webkit-font-smoothing: antialiased;
}

/* Marketing subpages (features, pricing, contact, …) */
.marketing-body main {
  padding-bottom: var(--lm-space-section-y-tight);
}
.marketing-body main > .container,
.marketing-body main > .landing-container {
  padding-top: var(--lm-space-block);
  padding-bottom: var(--lm-space-section-y);
  padding-left: var(--lm-space-container-x);
  padding-right: var(--lm-space-container-x);
}
.marketing-body main > .lm-profit-promise--callout {
  max-width: 1100px;
  margin: var(--lm-space-block) auto 0;
}
.marketing-body main > .lm-faq-section {
  margin-top: 0;
}
.marketing-body .marketing-breadcrumb-wrap {
  padding-top: var(--lm-space-block);
  padding-bottom: 0;
}
.marketing-footer {
  padding: var(--lm-space-section-y-tight) 0;
  text-align: center;
  color: var(--lm-muted);
  border-top: 1px solid var(--lm-border);
  margin-top: 0;
}
.marketing-body .site-header + main > .container:not(.marketing-breadcrumb-wrap) {
  padding-top: var(--lm-space-section-y-tight);
}


.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page .landing-logo,
.lm-font-display {
  font-family: var(--lm-font-display);
  letter-spacing: -0.03em;
  color: var(--lm-ink);
}

@media (prefers-reduced-motion: reduce) {
  .lm-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}