/* =========================================================
   LEGACY HOUSE — BASE / SEMANTIC ELEMENT MAPPING
   Sensible defaults so authors can write plain HTML, plus
   the signature grain texture and component primitive
   classes referenced by preview cards + the deck templates.
   ========================================================= */

.lh-root, body.lh {
  background: var(--lh-bg);
  color: var(--lh-fg);
  font-family: var(--lh-font-body);
  font-size: var(--lh-size-body);
  line-height: var(--lh-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — slide titles, hero text. ALL CAPS by default. */
.lh-display, .lh-h-mega {
  font-family: var(--lh-font-display);
  font-weight: 950;
  font-size: var(--lh-size-mega);
  line-height: var(--lh-lh-display);
  letter-spacing: var(--lh-track-display);
  text-transform: uppercase;
  margin: 0;
}
.lh-h1 {
  font-family: var(--lh-font-display);
  font-weight: 900;
  font-size: var(--lh-size-d1);
  line-height: var(--lh-lh-display);
  letter-spacing: var(--lh-track-display);
  text-transform: uppercase;
  margin: 0;
}
.lh-h2 {
  font-family: var(--lh-font-display);
  font-weight: 900;
  font-size: var(--lh-size-d2);
  line-height: var(--lh-lh-tight);
  letter-spacing: var(--lh-track-tight);
  text-transform: uppercase;
  margin: 0;
}
.lh-h3 {
  font-family: var(--lh-font-display);
  font-weight: 900;
  font-size: var(--lh-size-d3);
  line-height: var(--lh-lh-tight);
  letter-spacing: var(--lh-track-tight);
  text-transform: uppercase;
  margin: 0;
}
.lh-h4 {
  font-family: var(--lh-font-body);
  font-weight: 800;
  font-size: var(--lh-size-h1);
  line-height: var(--lh-lh-snug);
  letter-spacing: var(--lh-track-tight);
  text-transform: uppercase;
  margin: 0;
}

/* BODY */
.lh-body, .lh-p {
  font-family: var(--lh-font-body);
  font-size: var(--lh-size-body);
  line-height: var(--lh-lh-body);
  margin: 0;
}
.lh-body-lg { font-size: var(--lh-size-body-lg); }
.lh-body-sm { font-size: var(--lh-size-body-sm); }

/* UTILITY — eyebrow / tag / label */
.lh-eyebrow {
  font-family: var(--lh-font-body);
  font-weight: 600;
  font-size: var(--lh-size-eyebrow);
  letter-spacing: var(--lh-track-eyebrow);
  text-transform: uppercase;
  color: var(--lh-fg-muted);
}
.lh-mono {
  font-family: var(--lh-font-mono);
  font-size: var(--lh-size-caption);
  letter-spacing: 0.02em;
}
.lh-micro {
  font-family: var(--lh-font-body);
  font-weight: 600;
  font-size: var(--lh-size-micro);
  letter-spacing: var(--lh-track-eyebrow);
  text-transform: uppercase;
  color: var(--lh-fg-subtle);
}

/* COLOR HELPERS */
.lh-fg         { color: var(--lh-fg); }
.lh-fg-muted   { color: var(--lh-fg-muted); }
.lh-fg-subtle  { color: var(--lh-fg-subtle); }
.lh-fg-accent  { color: var(--lh-accent); }
.lh-glow       { color: var(--lh-accent); text-shadow: 0 0 18px var(--lh-accent-glow); }

/* =========================================================
   GRAIN — the signature texture. A subtle film noise that
   sits over dark hero plates. class="lh-grain" places a
   noise layer behind a container's content.
   ========================================================= */
.lh-grain { position: relative; isolation: isolate; }
.lh-grain::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: .08;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Vignette — used on cinematic hero images */
.lh-vignette { position: relative; }
.lh-vignette::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6) 100%);
}

/* =========================================================
   COMPONENT PRIMITIVES (referenced by preview cards + kit)
   ========================================================= */
.lh-card {
  background: var(--lh-surface);
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-r-5);
  box-shadow: var(--lh-shadow-2);
  overflow: hidden;
}
.lh-btn {
  font-family: var(--lh-font-body);
  font-weight: 700;
  font-size: var(--lh-size-body-sm);
  letter-spacing: var(--lh-track-loose);
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--lh-r-pill);
  border: 1px solid var(--lh-fg);
  background: var(--lh-fg);
  color: var(--lh-bg);
  cursor: pointer;
  transition: transform var(--lh-dur-fast) var(--lh-ease-out),
              background var(--lh-dur-base) var(--lh-ease-out),
              color var(--lh-dur-base) var(--lh-ease-out),
              box-shadow var(--lh-dur-base) var(--lh-ease-out);
}
.lh-btn:hover  { background: var(--lh-accent); border-color: var(--lh-accent); color: #fff; box-shadow: var(--lh-glow-md); }
.lh-btn:active { transform: scale(.97); }
.lh-btn--ghost { background: transparent; color: var(--lh-fg); }
.lh-btn--ghost:hover { background: transparent; color: var(--lh-accent); border-color: var(--lh-accent); box-shadow: none; text-shadow: 0 0 14px var(--lh-accent-glow); }
.lh-btn--accent { background: var(--lh-accent); border-color: var(--lh-accent); color: #fff; box-shadow: var(--lh-glow-sm); }
.lh-btn--accent:hover { box-shadow: var(--lh-glow-lg); }

.lh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lh-font-body); font-weight: 700;
  font-size: var(--lh-size-eyebrow); letter-spacing: var(--lh-track-eyebrow);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--lh-r-1);
  background: var(--lh-bg-raised); color: var(--lh-fg-muted);
  border: 1px solid var(--lh-border);
}
.lh-badge--accent { background: var(--lh-accent); color: #fff; border-color: var(--lh-accent); }
.lh-badge--paper { background: var(--lh-paper); color: var(--lh-black); border-color: var(--lh-paper); }

/* FORM CONTROLS */
.lh-input, input.lh-input, textarea.lh-input, select.lh-input {
  background: var(--lh-bg-raised);
  border: 1px solid var(--lh-border);
  color: var(--lh-fg);
  font-family: var(--lh-font-body);
  font-size: var(--lh-size-body-sm);
  padding: 12px 14px;
  border-radius: var(--lh-r-2);
  outline: none;
  transition: border-color var(--lh-dur-base), box-shadow var(--lh-dur-base);
}
.lh-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--lh-accent);
  box-shadow: 0 0 0 3px rgba(56,151,80,.18);
}
.lh-check {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-r-1);
  background: var(--lh-bg-raised);
  position: relative; cursor: pointer;
}
.lh-check:checked { background: var(--lh-accent); border-color: var(--lh-accent); }
.lh-check:checked::after {
  content: "\2713"; color: #fff; font-size: 12px;
  position: absolute; left: 3px; top: -1px;
}
.lh-check:focus { box-shadow: 0 0 0 3px rgba(56,151,80,.18); }

/* Default link styling — green on hover, glow. */
a { color: var(--lh-accent); text-decoration: none; }
a:hover { color: var(--lh-accent); text-shadow: 0 0 14px var(--lh-accent-glow); }