/* ============================================================
 * HIVE Design System — Tokens
 * Source of truth: HIVE Design System (colors_and_type.css)
 * Loaded globally on every page via functions.php.
 * ============================================================ */

:root {
  /* Brand primary / accents */
  --green:            #4a9c4a;
  --green-light:      #6bc46b;
  --green-bright:     #80d778;
  --green-deep:       #3a8a3a;
  --green-tint-05:    rgba(74,156,74,0.05);
  --green-tint-10:    rgba(74,156,74,0.10);
  --green-tint-20:    rgba(74,156,74,0.20);
  --green-tint-30:    rgba(74,156,74,0.30);

  /* Navy / neutrals */
  --navy:             #19222e;
  --navy-deeper:      #1e2d3d;
  --navy-line:        #253a52;
  --steel:            #2d4a6b;
  --steel-soft:       #5479a3;
  --pale-blue:        #acbdd2;
  --offwhite:         #f6f6f6;
  --mint:             #f0f4f1;
  --secondary-mint:   #e8f0e9;
  --border-mint:      #c8ddd0;
  --destructive:      #dc2626;

  /* Shadows */
  --shadow-card:      0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-fab:       0 10px 15px -3px rgba(74,156,74,0.30), 0 4px 6px -4px rgba(74,156,74,0.30);
  --shadow-drawer:    0 25px 50px -12px rgba(0,0,0,0.25);

  /* Radius */
  --r-sm:  4px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-3xl: 24px;
  --r-pill: 9999px;

  /* Spacing (Elementor-friendly) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-code: 48px;
}

/* Dark (default) */
:root[data-theme="dark"] {
  --bg:            var(--navy);
  --bg-elev:       #121a25;
  --card:          var(--navy-deeper);
  --card-hover:    #253649;
  --section-alt:   #161f2b;
  --border:        var(--navy-line);
  --fg:            var(--offwhite);
  --fg-muted:      var(--pale-blue);
  --fg-dim:        rgba(246,246,246,0.45);
  --primary:       var(--green-light);
  --primary-hover: var(--green-bright);
  --primary-fg:    var(--navy);
  --chip-bg:       rgba(107,196,107,0.12);
  --chip-border:   rgba(107,196,107,0.28);
  --chip-fg:       var(--green-bright);
  --nav-bg:        rgba(25,34,46,0.85);
  --grid-line:     rgba(107,196,107,0.06);
}

/* Light */
:root[data-theme="light"] {
  --bg:            var(--mint);
  --bg-elev:       #ffffff;
  --card:          #ffffff;
  --card-hover:    var(--secondary-mint);
  --section-alt:   #ebf1ec;
  --border:        var(--border-mint);
  --fg:            var(--navy);
  --fg-muted:      var(--steel);
  --fg-dim:        rgba(25,34,46,0.45);
  --primary:       var(--green);
  --primary-hover: var(--green-deep);
  --primary-fg:    #ffffff;
  --chip-bg:       var(--green-tint-10);
  --chip-border:   rgba(74,156,74,0.25);
  --chip-fg:       var(--green-deep);
  --nav-bg:        rgba(240,244,241,0.85);
  --grid-line:     rgba(74,156,74,0.08);
}

/* Global base */
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font-sans) !important;
  transition: background .35s ease, color .35s ease;
}
::selection { background: var(--primary); color: var(--primary-fg); }

/* Override Hello Elementor default typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -.025em;
}
p, li, a { font-family: var(--font-sans); }

/* Elementor default container width override to match preview */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed {
  max-width: 1200px;
}

/* Shared reveal */
.hive-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.hive-reveal.in { opacity: 1; transform: none; }
.hive-d1 { transition-delay: .08s; }
.hive-d2 { transition-delay: .16s; }
.hive-d3 { transition-delay: .24s; }
.hive-d4 { transition-delay: .32s; }

/* Buttons — work both as Elementor button style and raw */
.hive-btn-primary .elementor-button {
  background: var(--primary);
  color: var(--primary-fg);
  border: none;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hive-btn-primary .elementor-button:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px var(--green-tint-30);
  color: var(--primary-fg);
}

.hive-btn-ghost .elementor-button {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hive-btn-ghost .elementor-button:hover {
  border-color: var(--chip-border);
  color: var(--fg);
  background: var(--chip-bg);
}

/* Section label (reusable) */
.hive-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chip-fg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .75rem;
}


/* Utility classes for Elementor custom-CSS targeting */
.hive-bg-page { background: var(--bg); }
.hive-bg-section-alt { background: var(--section-alt); }
.hive-border-top { border-top: 1px solid var(--border); }
.hive-text-muted { color: var(--fg-muted); }
.hive-font-mono { font-family: var(--font-mono); }

/* Contact Form 7 styling — match design system */
.wpcf7-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-card);
}
.wpcf7-form p { margin: 0; }
.wpcf7-form label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea,
.wpcf7-form select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--chip-bg);
}
.wpcf7-form input[type="submit"] {
  background: var(--primary);
  color: var(--primary-fg);
  border: none;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  transition: background .2s, transform .15s;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* Responsive utility */
@media (max-width: 700px) {
  :root {
    --space-20: 56px;
    --space-16: 48px;
  }
}