/* ============================================================
 * LHT Visual DNA v4.0 — Shared Design System
 * ============================================================
 * Research-backed visual patterns from IMAGE-CREATOR-V4-10X-PROJECT-PAPER.md
 *
 * Apply to any page in the ecosystem to inherit the 10x visual
 * upgrade without breaking existing functionality.
 *
 * Import:
 *   <link rel="stylesheet" href="/assets/lht-visual-dna-v4.css">
 *
 * Then use classes: .lht-v4-hero, .lht-v4-stat-hero, .lht-v4-pill,
 * .lht-v4-button, .lht-v4-card, .lht-v4-testimonial, .lht-v4-grain
 *
 * See TRANSPLANT-VISUAL-DNA-MASTER-PROMPT.md for usage guide.
 * ============================================================ */

/* FONT FACES — embedded via woff from @fontsource + google/fonts */
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local('Space Grotesk Medium'), url('/assets/fonts/SpaceGrotesk-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('Space Grotesk Bold'), url('/assets/fonts/SpaceGrotesk-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/HankenGrotesk-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/HankenGrotesk-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-Black.woff') format('woff');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Manrope-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Manrope-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Medium.woff') format('woff');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('/assets/fonts/PlayfairDisplay-BoldItalic.woff') format('woff');
}

/* CSS VARIABLES — 4 palettes + type scale + tokens */
:root {
  /* Palette: carbon-gold (LHT legacy) */
  --lht-bg: #121212;
  --lht-bg-darker: #0B0B0D;
  --lht-bg-card: #15161A;
  --lht-bg-elev: #1A1A1E;
  --lht-accent: #D6A73B;
  --lht-accent-soft: #FFC145;
  --lht-bone: #F5F4F1;
  --lht-bone-soft: rgba(245,244,241,0.72);
  --lht-bone-mute: rgba(245,244,241,0.48);
  --lht-border: rgba(245,244,241,0.08);
  --lht-border-accent: rgba(214,167,59,0.28);

  /* Semantic */
  --lht-green: #16A34A;
  --lht-amber: #f59e0b;
  --lht-red: #ef4444;
  --lht-blue: #2F80ED;

  /* Type stacks v4 */
  --lht-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lht-font-display-serif: 'Fraunces', Georgia, serif;
  --lht-font-display-alt: 'Hanken Grotesk', -apple-system, sans-serif;
  --lht-font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lht-font-body-alt: 'Inter', -apple-system, sans-serif;
  --lht-font-data: 'JetBrains Mono', 'Courier New', monospace;
  --lht-font-accent: 'Playfair Display', Georgia, serif;

  /* Type scale */
  --lht-text-xs: 10px;
  --lht-text-sm: 12px;
  --lht-text-base: 14px;
  --lht-text-lg: 16px;
  --lht-text-xl: 20px;
  --lht-text-2xl: 28px;
  --lht-text-3xl: 38px;
  --lht-text-4xl: 56px;
  --lht-text-5xl: 72px;
  --lht-text-hero: clamp(38px, 5.2vw, 72px);

  /* Spacing (12-col modular grid) */
  --lht-gap-1: 4px;
  --lht-gap-2: 8px;
  --lht-gap-3: 12px;
  --lht-gap-4: 16px;
  --lht-gap-6: 24px;
  --lht-gap-8: 32px;
  --lht-gap-12: 48px;
  --lht-gap-16: 64px;

  /* Radius */
  --lht-radius-sm: 6px;
  --lht-radius-md: 10px;
  --lht-radius-lg: 16px;
  --lht-radius-xl: 22px;
  --lht-radius-pill: 100px;

  /* Safe zones (for ad / full-bleed contexts) */
  --lht-safe-top: 12%;
  --lht-safe-bottom: 12%;
}

/* ALT PALETTE: deep-teal-amber */
[data-lht-palette="deep-teal-amber"] {
  --lht-bg: #0E2A2E;
  --lht-bg-darker: #06181B;
  --lht-bg-card: #14383D;
  --lht-bg-elev: #1A474C;
  --lht-accent: #D99149;
  --lht-accent-soft: #E6A866;
  --lht-bone: #F2EDE4;
  --lht-bone-soft: rgba(242,237,228,0.75);
  --lht-border-accent: rgba(217,145,73,0.3);
}
[data-lht-palette="charcoal-dusty-rose"] {
  --lht-bg: #1A1A1E;
  --lht-bg-darker: #0F0F12;
  --lht-bg-card: #242428;
  --lht-bg-elev: #2D2D32;
  --lht-accent: #D9A6A0;
  --lht-accent-soft: #E6B8B3;
  --lht-bone: #F5F1EC;
  --lht-border-accent: rgba(217,166,160,0.3);
}
[data-lht-palette="ivory-copper"] {
  --lht-bg: #F5F1EC;
  --lht-bg-darker: #E8E2DA;
  --lht-bg-card: #FDFBF7;
  --lht-bg-elev: #FFFFFF;
  --lht-accent: #B87333;
  --lht-accent-soft: #D49356;
  --lht-bone: #1A1410;
  --lht-bone-soft: rgba(26,20,16,0.75);
  --lht-bone-mute: rgba(26,20,16,0.5);
  --lht-border: rgba(26,20,16,0.1);
  --lht-border-accent: rgba(184,115,51,0.3);
}

/* BASE — opt-in via body.lht-v4 */
body.lht-v4, .lht-v4-root {
  font-family: var(--lht-font-body);
  color: var(--lht-bone);
  background: var(--lht-bg);
  -webkit-font-smoothing: antialiased;
}

/* COMPONENT PRIMITIVES — lht-v4- prefix to avoid collisions */

.lht-v4-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--lht-gap-2);
  padding: 7px 14px;
  background: rgba(214,167,59,0.13);
  border: 1px solid var(--lht-border-accent);
  border-radius: var(--lht-radius-pill);
  font-family: var(--lht-font-body);
  font-size: var(--lht-text-xs);
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--lht-accent);
  text-transform: uppercase;
}

.lht-v4-pill--accent {
  background: var(--lht-accent);
  color: var(--lht-bg-darker);
  border-color: var(--lht-accent);
}

.lht-v4-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lht-gap-2);
  padding: 14px 28px;
  background: var(--lht-accent);
  color: var(--lht-bg-darker);
  border: none;
  border-radius: var(--lht-radius-pill);
  font-family: var(--lht-font-body);
  font-size: var(--lht-text-sm);
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
  box-shadow: 0 6px 20px var(--lht-bg-darker), inset 0 1px 0 rgba(255,255,255,0.2);
}
.lht-v4-button:hover { transform: translateY(-1px); background: var(--lht-accent-soft); }
.lht-v4-button--ghost {
  background: transparent;
  color: var(--lht-bone);
  border: 1px solid var(--lht-border);
  box-shadow: none;
}
.lht-v4-button--ghost:hover { border-color: var(--lht-accent); color: var(--lht-accent); background: transparent; }

.lht-v4-card {
  background: var(--lht-bg-card);
  border: 1px solid var(--lht-border);
  border-radius: var(--lht-radius-lg);
  padding: var(--lht-gap-6);
  transition: transform .2s, border-color .2s;
}
.lht-v4-card:hover { transform: translateY(-2px); border-color: var(--lht-border-accent); }
.lht-v4-card--elev { background: var(--lht-bg-elev); }

.lht-v4-hero {
  text-align: left;
  padding: var(--lht-gap-12) 0 var(--lht-gap-8);
}
.lht-v4-hero h1 {
  font-family: var(--lht-font-display);
  font-weight: 700;
  font-size: var(--lht-text-hero);
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--lht-bone);
  margin-bottom: var(--lht-gap-4);
}
.lht-v4-hero h1 em {
  font-family: var(--lht-font-display-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--lht-accent);
  font-size: 0.88em;
}
.lht-v4-hero .lht-v4-sub {
  font-family: var(--lht-font-body);
  font-size: var(--lht-text-lg);
  color: var(--lht-bone-soft);
  max-width: 680px;
  line-height: 1.6;
}

.lht-v4-stat-hero {
  background: linear-gradient(145deg, var(--lht-bg-elev) 0%, var(--lht-bg-card) 100%);
  border: 1px solid var(--lht-border-accent);
  border-radius: var(--lht-radius-xl);
  padding: 30px 28px;
  position: relative;
  overflow: hidden;
}
.lht-v4-stat-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lht-accent), var(--lht-accent-soft));
}
.lht-v4-stat-hero .lht-v4-stat-label {
  font-family: var(--lht-font-body);
  font-size: var(--lht-text-xs);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--lht-bone-mute);
  text-transform: uppercase;
  margin-bottom: var(--lht-gap-2);
}
.lht-v4-stat-hero .lht-v4-stat-num {
  font-family: var(--lht-font-data);
  font-weight: 700;
  font-size: var(--lht-text-4xl);
  line-height: 1;
  color: var(--lht-accent);
  letter-spacing: -2px;
  margin-bottom: var(--lht-gap-3);
}

.lht-v4-testimonial {
  display: inline-flex;
  align-items: center;
  gap: var(--lht-gap-2);
  padding: 10px 18px;
  background: var(--lht-accent);
  border-radius: var(--lht-radius-pill);
  color: var(--lht-bg-darker);
  font-family: var(--lht-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: var(--lht-text-base);
  box-shadow: 0 6px 18px var(--lht-bg-darker);
}
.lht-v4-testimonial::before {
  content: '★★★★★';
  font-family: var(--lht-font-body);
  font-size: 11px;
  letter-spacing: 1px;
}

.lht-v4-data { font-family: var(--lht-font-data); font-weight: 500; letter-spacing: 0.2px; }
.lht-v4-display { font-family: var(--lht-font-display); font-weight: 700; letter-spacing: -0.5px; }
.lht-v4-display-serif { font-family: var(--lht-font-display-serif); font-weight: 700; }
.lht-v4-accent { font-family: var(--lht-font-accent); font-style: italic; }

/* FILM GRAIN layer — subtle retro-modern texture (Agent D insight #9, #14) */
.lht-v4-grain {
  position: relative;
}
.lht-v4-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  z-index: 1;
}

/* 12-COL grid */
.lht-v4-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--lht-gap-6);
}
.lht-v4-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lht-v4-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lht-v4-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .lht-v4-grid--3, .lht-v4-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .lht-v4-grid--2, .lht-v4-grid--3, .lht-v4-grid--4 { grid-template-columns: 1fr; }
}

/* UTILITIES */
.lht-v4-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(214,167,59,0.14);
  border-left: 3px solid var(--lht-accent);
  border-radius: 3px;
  font-family: var(--lht-font-body);
  font-weight: 800;
  font-size: var(--lht-text-xs);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lht-accent);
  margin-bottom: var(--lht-gap-4);
}

.lht-v4-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lht-accent), transparent);
  border: 0;
  margin: var(--lht-gap-8) 0;
}

.lht-v4-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--lht-gap-6); }
.lht-v4-container--narrow { max-width: 920px; }

/* ACCESS — reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .lht-v4-card, .lht-v4-button { transition: none; }
  .lht-v4-card:hover, .lht-v4-button:hover { transform: none; }
}