/*
Theme Name: Lavio Blocksy Child
Theme URI: https://lavio-tech.com
Description: Design system layer for LAVIO. Holds the brand tokens, typography and utility classes so every Elementor page inherits one visual language.
Author: LAVIO
Template: blocksy
Version: 1.0.1
Requires PHP: 7.4
Text Domain: lavio-child
*/

/* =========================================================
   1. FONTS (self-hosted — no Google CDN, no GDPR exposure)
   ========================================================= */

@font-face {
  font-family: "Inter var";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope var";
  src: url("fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk var";
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. DESIGN TOKENS
   ========================================================= */

:root {
  /* Brand */
  --lv-violet: #7C5CFF;
  --lv-violet-600: #5B3BE0;
  --lv-blue: #4E6BFF;
  --lv-blue-soft: #8FA4FF;

  /* Gradient used on CTAs and accent words */
  --lv-gradient: linear-gradient(135deg, #4E6BFF 0%, #9B5CFF 100%);
  --lv-gradient-soft: linear-gradient(135deg, rgba(78, 107, 255, .12) 0%, rgba(155, 92, 255, .12) 100%);

  /* Neutrals */
  --lv-ink: #0B0E1A;
  --lv-ink-2: #151A2D;
  --lv-body: #3A4055;
  --lv-muted: #6B7280;
  --lv-line: #E7E9F2;
  --lv-soft: #F5F6FB;
  --lv-white: #FFFFFF;

  /* Dark section surfaces */
  --lv-dark: #070A14;
  --lv-dark-2: #0E1322;
  --lv-dark-line: rgba(255, 255, 255, .09);

  /* Shape */
  --lv-radius-sm: 8px;
  --lv-radius: 14px;
  --lv-radius-lg: 22px;
  --lv-container: 1240px;

  /* Type */
  --lv-font-body: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lv-font-head: "Manrope var", "Inter var", -apple-system, "Segoe UI", sans-serif;
}

/* =========================================================
   3. PALETTE OVERRIDE
   Blocksy prints its dynamic CSS *after* this file, so the
   selector needs higher specificity than a plain :root.
   :root:root = (0,2,0) which beats :root = (0,1,0).
   ========================================================= */

:root:root {
  --theme-palette-color-1: #7C5CFF; /* primary   */
  --theme-palette-color-2: #5B3BE0; /* primary-2 */
  --theme-palette-color-3: #0B0E1A; /* headings  */
  --theme-palette-color-4: #3A4055; /* body text */
  --theme-palette-color-5: #E7E9F2; /* borders   */
  --theme-palette-color-6: #F5F6FB; /* light bg  */
  --theme-palette-color-7: #FAFAFD; /* subtler bg*/
  --theme-palette-color-8: #FFFFFF; /* white     */

  /* Elementor global bridge */
  --e-global-color-primary: #7C5CFF;
  --e-global-color-secondary: #4E6BFF;
  --e-global-color-text: #3A4055;
  --e-global-color-accent: #7C5CFF;
  --e-global-typography-primary-font-family: "Manrope var", sans-serif;
  --e-global-typography-secondary-font-family: "Inter var", sans-serif;
  --e-global-typography-text-font-family: "Inter var", sans-serif;
  --e-global-typography-accent-font-family: "Inter var", sans-serif;
}

/* =========================================================
   4. BASE TYPOGRAPHY
   body.lv / body.lv h* = (0,1,1) / (0,1,2) so they beat the
   theme's element-level rules regardless of source order.
   ========================================================= */

body.lv,
body.lv .entry-content,
body.lv .ct-body {
  font-family: var(--lv-font-body);
  color: var(--lv-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.lv h1, body.lv h2, body.lv h3,
body.lv h4, body.lv h5, body.lv h6 {
  font-family: var(--lv-font-head);
  color: var(--lv-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

body.lv h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
body.lv h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
body.lv h3 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); letter-spacing: -0.01em; }
body.lv h4 { font-size: 1.15rem; }

/* =========================================================
   5. UTILITIES (used inside Elementor sections)
   ========================================================= */

/* Gradient text — for the accent word in a headline */
.lv-grad-text {
  background: var(--lv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Small uppercase eyebrow with a gradient tick, as in the mockup */
.lv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lv-violet);
}

.lv-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--lv-gradient);
}

/* Primary CTA — gradient pill */
.lv-btn,
a.lv-btn,
.elementor-button.lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--lv-gradient);
  color: #fff;
  font-family: var(--lv-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 8px 24px -8px rgba(124, 92, 255, .55);
}

.lv-btn:hover,
a.lv-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 32px -10px rgba(124, 92, 255, .7);
}

/* Ghost CTA — outlined pill on dark backgrounds */
.lv-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: none;
  color: #fff;
}

.lv-btn--ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: none;
}

/* Dark surface section */
.lv-dark {
  background: var(--lv-dark);
  color: rgba(255, 255, 255, .72);
}

.lv-dark h1, .lv-dark h2, .lv-dark h3, .lv-dark h4 {
  color: #fff;
}

.lv-dark .lv-btn--ghost { color: #fff; }

/* Muted helper text */
.lv-muted { color: var(--lv-muted); }

/* Cards */
.lv-card {
  background: #fff;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 92, 255, .35);
  box-shadow: 0 22px 44px -24px rgba(11, 14, 26, .28);
}

/* Container width nudge */
.ct-container,
.lv-container {
  max-width: var(--lv-container);
}

/* Form fields */
.lv-form input[type="text"],
.lv-form input[type="email"],
.lv-form textarea {
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--lv-font-body);
}

.lv-form input:focus,
.lv-form textarea:focus {
  outline: none;
  border-color: var(--lv-violet);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .14);
}

/* Accessibility: keep focus visible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lv-violet);
  outline-offset: 3px;
}