/* ===== Technovids LIGHT tokens (brand stays same classes) ===== */
:root{
  --tv-primary:   var(--e-global-color-primary, #1A237E);
  --tv-secondary: var(--e-global-color-secondary, #283593);
  --tv-accent:    var(--e-global-color-accent, #EF5252);

  --tv-page:   #F6F8FF;
  --tv-surface:#FFFFFF;
  --tv-text:   #0B1020;
  --tv-muted:  #4A536D;
  --tv-border: #E3E7F3;
  --tv-radius: 16px;
  --tv-radius-lg: 18px;
  --tv-shadow-1: 0 8px 22px rgba(17,23,51,.10);
  --tv-shadow-2: 0 16px 42px rgba(17,23,51,.12);

  --tv-h1: clamp(28px,5vw,44px);
  --tv-h2: clamp(24px,4.5vw,34px);
  --tv-h3: 20px;

  --tv-wrap-max: 1200px;
  --tv-pad-x: 25px;
  --tv-pad-y: 56px;
}

body.theme-light{ background: var(--tv-page); color: var(--tv-text); }
.elementor, .elementor *{ box-sizing: border-box; }
.tv-section{ position: relative; }
.tv-wrap{ max-width: var(--tv-wrap-max); margin: 0 auto; padding: var(--tv-pad-y) var(--tv-pad-x); }

.tv-h1{ font-size:var(--tv-h1); line-height:1.15; margin:.25em 0 .35em; color: var(--tv-primary); }
.tv-h2{ font-size:var(--tv-h2); line-height:1.2;  margin:0 0 6px;     color: var(--tv-primary); }
.tv-h3{ font-size:var(--tv-h3); line-height:1.3;  margin:0 0 6px;     color: var(--tv-text); }
.tv-sub{ color: var(--tv-muted); margin:0; }

.tvx-card{
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow-1);
  padding: 18px;
  color: var(--tv-text);
}

.tvx-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.tvx-btn{
  display:inline-block; border-radius:999px; padding:12px 18px; font-weight:800;
  border:1px solid transparent; transition: transform .15s ease, filter .15s ease, background .2s ease, color .2s ease;
}
.tvx-btn--accent{ background: var(--tv-accent); color: #000; }
.tvx-btn--outline{ background: transparent; color: var(--tv-accent); border-color: var(--tv-accent); }
.tvx-btn--ghost { background: #fff; color: var(--tv-text); border:1px solid var(--tv-border); }
.tvx-btn:hover  { transform: translateY(-1px); filter: brightness(1.02); }
.tvx-btn:active { transform: translateY(0); }

.tv-grid-2, .tv-grid-3, .tv-grid-4{ display:grid; gap:16px; }
@media (min-width:700px){
  .tv-grid-2{ grid-template-columns: 1fr 1fr; }
  .tv-grid-3{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width:1025px){
  .tv-grid-4{ grid-template-columns: repeat(4, 1fr); }
}