/* ============================================================
   ElevAIT IQ — Brand Design Tokens
   "Elevating Business Through Intelligence"
   Drop this in before your site styles, or paste the :root
   block into your existing stylesheet.
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --eiq-navy:        #0F172A;   /* Primary dark — headers, footers, "Elev" text */
  --eiq-sky:         #00AEEF;   /* Bright brand blue — gradient start, accents */
  --eiq-blue:        #2563EB;   /* Deep brand blue — gradient end, links, CTAs */
  --eiq-teal:        #00C2A8;   /* Success / highlight accent */
  --eiq-slate:       #64748B;   /* Secondary text, captions, borders */
  --eiq-cloud:       #F5F7FA;   /* Light background sections */
  --eiq-white:       #FFFFFF;

  /* ---- Tints & shades (derived) ---- */
  --eiq-navy-800:    #1E293B;
  --eiq-navy-700:    #334155;
  --eiq-sky-100:     #E0F5FE;
  --eiq-blue-100:    #DBEAFE;
  --eiq-teal-100:    #CCF5EF;

  /* ---- Brand gradient (the "AIT IQ" sweep) ---- */
  --eiq-gradient:        linear-gradient(90deg, #00AEEF 0%, #2563EB 100%);
  --eiq-gradient-hero:   linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%, #2563EB 100%);

  /* ---- Semantic tokens ---- */
  --eiq-bg:              var(--eiq-white);
  --eiq-bg-alt:          var(--eiq-cloud);
  --eiq-bg-dark:         var(--eiq-navy);
  --eiq-text:            var(--eiq-navy);
  --eiq-text-secondary:  var(--eiq-slate);
  --eiq-text-on-dark:    var(--eiq-white);
  --eiq-link:            var(--eiq-blue);
  --eiq-link-hover:      var(--eiq-sky);
  --eiq-border:          #E2E8F0;
  --eiq-cta:             var(--eiq-sky);
  --eiq-cta-hover:       var(--eiq-blue);
  --eiq-success:         var(--eiq-teal);

  /* ---- Typography ----
     Brand face: Avenir Next (licensed / Apple systems).
     Web substitute shipped in this kit: Montserrat.       */
  --eiq-font-display: "Montserrat", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
  --eiq-font-body:    "Montserrat", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;

  --eiq-weight-regular:  400;
  --eiq-weight-semibold: 600;
  --eiq-weight-bold:     700;
  --eiq-weight-heavy:    800;   /* logo / hero weight */

  /* Type scale (1.25 ratio) */
  --eiq-text-xs:   0.8rem;
  --eiq-text-sm:   0.9rem;
  --eiq-text-base: 1rem;
  --eiq-text-lg:   1.25rem;
  --eiq-text-xl:   1.563rem;
  --eiq-text-2xl:  1.953rem;
  --eiq-text-3xl:  2.441rem;
  --eiq-text-4xl:  3.052rem;

  /* ---- Radii & shadows ---- */
  --eiq-radius-sm:  6px;
  --eiq-radius:     10px;
  --eiq-radius-lg:  16px;
  --eiq-radius-icon: 21%;      /* matches app icon corner radius */
  --eiq-shadow:     0 4px 16px rgba(15, 23, 42, 0.08);
  --eiq-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.14);
}

/* ============================================================
   Ready-made component classes (optional)
   ============================================================ */

.eiq-btn-primary {
  display: inline-block;
  background: var(--eiq-cta);
  color: var(--eiq-white);
  font-family: var(--eiq-font-display);
  font-weight: var(--eiq-weight-bold);
  font-size: var(--eiq-text-sm);
  padding: 0.75em 1.6em;
  border: none;
  border-radius: var(--eiq-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.eiq-btn-primary:hover { background: var(--eiq-cta-hover); transform: translateY(-1px); }

.eiq-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--eiq-blue);
  font-family: var(--eiq-font-display);
  font-weight: var(--eiq-weight-bold);
  font-size: var(--eiq-text-sm);
  padding: 0.75em 1.6em;
  border: 2px solid var(--eiq-blue);
  border-radius: var(--eiq-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.eiq-btn-secondary:hover { background: var(--eiq-blue); color: var(--eiq-white); }

/* Gradient text — for the "Intelligence" word in headlines */
.eiq-gradient-text {
  background: var(--eiq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dark hero section, matching the header mockup */
.eiq-hero {
  background: var(--eiq-gradient-hero);
  color: var(--eiq-text-on-dark);
}
.eiq-hero h1 {
  font-family: var(--eiq-font-display);
  font-weight: var(--eiq-weight-heavy);
  font-size: var(--eiq-text-4xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
}