/**
 * AIEE Design System — Horizon (2026)
 * Functional palette: ink ground · canal teal · electric cyan · ember signal.
 * See kngcl-theme.css for component layout; this file owns tokens + global overrides.
 */
:root {
  /* Surfaces */
  --kc-ink:         #070D14;
  --kc-navy-dark:   #070D14;
  --kc-navy:        #0C4A6E;
  --kc-navy-mid:    #0E5C7A;
  --kc-teal:        #0D9488;
  --kc-cyan:        #22D3EE;
  --kc-cyan-dim:    #0891B2;
  --kc-sage:        #10B981;
  --kc-cta:         #F97316;
  --kc-cta-hover:   #FB923C;
  --kc-gold:        var(--kc-teal);
  --kc-gold-light:  var(--kc-cyan);
  --kc-gold-dark:   #0F766E;
  --kc-text:        #0F172A;
  --kc-muted:       #64748B;
  --kc-bg:          #F8FAFC;
  --kc-subtle:      #EEF2F6;
  --kc-line:        #CBD5E1;
  --kc-paper:       #FFFFFF;

  --kc-font-head: "Fraunces", "Georgia", serif;
  --kc-font-body: "Outfit", system-ui, -apple-system, sans-serif;

  --kc-radius-sm: 6px;
  --kc-radius-md: 10px;
  --kc-radius-lg: 16px;
  --kc-shadow-sm: 0 1px 3px rgba(7, 13, 20, 0.06), 0 4px 14px rgba(12, 74, 110, 0.05);
  --kc-shadow-md: 0 12px 40px rgba(7, 13, 20, 0.08);
  --kc-shadow-lg: 0 24px 64px rgba(7, 13, 20, 0.18);
  --kc-shadow-glow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 20px 50px rgba(0, 0, 0, 0.35);
  --kc-ease: cubic-bezier(0.33, 1, 0.68, 1);

  --kngcl-red: var(--kc-teal);
  --kngcl-red-dark: var(--kc-cyan);
  --kngcl-text: var(--kc-text);
  --kngcl-muted: var(--kc-muted);
  --kngcl-bg: var(--kc-bg);
  --kngcl-subtle: var(--kc-subtle);
  --kngcl-line: var(--kc-line);
  --kngcl-font: var(--kc-font-body);
}

/* ── Global body & type ── */
body.kngcl-site {
  font-family: var(--kc-font-body);
  background:
    radial-gradient(1000px 480px at 88% -5%, rgba(34, 211, 238, 0.07), transparent 50%),
    radial-gradient(800px 400px at 0% 20%, rgba(13, 148, 136, 0.05), transparent 45%),
    var(--kc-bg) !important;
}

body.kngcl-site h1,
body.kngcl-site h2,
body.kngcl-site h3,
body.kngcl-site h4,
body.kngcl-site h5,
body.kngcl-site h6 {
  font-family: var(--kc-font-head);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ── Header: flat ink + teal rule ── */
body.kngcl-site .main-header {
  background: var(--kc-ink) !important;
  border-bottom: 2px solid var(--kc-teal) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  min-height: 68px !important;
}

body.kngcl-site .main-header .logo em {
  color: var(--kc-cyan) !important;
  font-family: var(--kc-font-body) !important;
  font-weight: 700 !important;
}

body.kngcl-site .menu-link {
  color: var(--kc-cyan) !important;
}

body.kngcl-site .main-menu > li > a:hover,
body.kngcl-site .main-nav li:hover > a,
body.kngcl-site .main-nav > ul > li.active > a {
  color: var(--kc-cyan) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
}

body.kngcl-site .sub-menu {
  background: rgba(7, 13, 20, 0.98) !important;
  border: 1px solid rgba(13, 148, 136, 0.35) !important;
}

body.kngcl-site .sub-menu li a:hover {
  color: var(--kc-cyan) !important;
}

/* ── Hero: teal horizon gradient, no italic ── */
.kngcl-hero {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(13, 148, 136, 0.12), transparent 50%),
    linear-gradient(160deg, var(--kc-ink) 0%, #0A3D5C 38%, #0C4A6E 72%, #134E4A 100%) !important;
  border-bottom: 2px solid var(--kc-teal) !important;
  box-shadow: 0 20px 60px rgba(7, 13, 20, 0.4) !important;
}

.kngcl-hero::before {
  background-size: 32px 32px !important;
  opacity: 0.35 !important;
}

.kngcl-eyebrow {
  color: var(--kc-cyan) !important;
  letter-spacing: 0.2em !important;
  font-family: var(--kc-font-body) !important;
}

.kngcl-eyebrow::before {
  background: linear-gradient(90deg, var(--kc-cyan), transparent) !important;
}

.kngcl-hero-title {
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

.kngcl-feature-card {
  border: 1px solid rgba(34, 211, 238, 0.35) !important;
  border-radius: var(--kc-radius-md) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.kngcl-feature-card:hover {
  border-color: var(--kc-cyan) !important;
  box-shadow: var(--kc-shadow-glow) !important;
}

.kngcl-kicker {
  color: var(--kc-cyan) !important;
  background: rgba(6, 182, 212, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
}

/* ── Section titles: teal accent bar (not gold underline) ── */
.kngcl-section-title {
  color: var(--kc-navy) !important;
  padding-left: 1rem !important;
  border-left: 4px solid var(--kc-teal) !important;
  padding-bottom: 0 !important;
  display: block !important;
}

.kngcl-section-title::after {
  display: none !important;
}

/* ── Cards & news ── */
.kngcl-news-item {
  border-radius: var(--kc-radius-md) !important;
}

.kngcl-news-item:hover {
  border-color: rgba(13, 148, 136, 0.4) !important;
}

.kngcl-news-item h3 a:hover {
  color: var(--kc-teal) !important;
}

.kngcl-pillar-card {
  border-radius: var(--kc-radius-md) !important;
}

.kngcl-pillar-card:hover {
  border-color: rgba(13, 148, 136, 0.5) !important;
}

/* ── Stats band ── */
.kngcl-stats-band {
  background: linear-gradient(180deg, #0A1628 0%, var(--kc-ink) 50%, #051018 100%) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.4) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.4) !important;
}

.kngcl-stat__value {
  color: var(--kc-cyan) !important;
  font-family: var(--kc-font-body) !important;
  font-weight: 700 !important;
}

.kngcl-stats-quote strong {
  color: var(--kc-cyan) !important;
}

/* ── CTAs: ember signal (energy) ── */
.kngcl-btn--primary {
  background: linear-gradient(135deg, #FB923C 0%, var(--kc-cta) 50%, #EA580C 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.35) !important;
}

.kngcl-btn--primary:hover {
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(249, 115, 22, 0.45) !important;
}

.kngcl-btn--ghost:hover {
  border-color: var(--kc-cyan) !important;
  color: var(--kc-cyan) !important;
}

body.kngcl-site .button:hover,
body.kngcl-site button.button:hover {
  background: linear-gradient(135deg, var(--kc-teal) 0%, var(--kc-cyan-dim) 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(13, 148, 136, 0.3) !important;
}

body.kngcl-site .button,
body.kngcl-site button.button {
  background: var(--kc-navy) !important;
  border-radius: var(--kc-radius-sm) !important;
}

/* ── Links ── */
.kngcl-link {
  border-bottom-color: var(--kc-teal) !important;
}

.kngcl-link:hover {
  color: var(--kc-teal) !important;
}

body.kngcl-site a:not(.kngcl-mobile-bottom-nav__link):hover {
  color: var(--kc-teal) !important;
}

.kngcl-hero .kngcl-link,
.kngcl-partnership .kngcl-link {
  border-bottom-color: var(--kc-cyan) !important;
}

/* ── Dark bands ── */
.kngcl-partnership,
.kngcl-contact-strip {
  background: linear-gradient(125deg, var(--kc-ink) 0%, var(--kc-navy) 60%, #0F3D4A 100%) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.45) !important;
}

.kngcl-contact-strip a:hover {
  color: var(--kc-cyan) !important;
  border-bottom-color: var(--kc-cyan) !important;
}

/* ── Newsletter ── */
.kngcl-newsletter-band {
  background: linear-gradient(180deg, #fff 0%, var(--kc-subtle) 100%) !important;
}

.kngcl-newsletter-band::after {
  background: linear-gradient(90deg, transparent, var(--kc-teal), transparent) !important;
}

/* ── Footer ── */
.main-footer {
  background: var(--kc-ink) !important;
  border-top: 2px solid var(--kc-teal) !important;
}

.main-footer h4 {
  color: var(--kc-cyan) !important;
  font-family: var(--kc-font-body) !important;
  letter-spacing: 0.12em !important;
}

body.kngcl-site .main-footer a:hover {
  color: var(--kc-cyan) !important;
}

/* ── Subpage hero ── */
body.kngcl-subpage {
  background-color: var(--kc-ink) !important;
}

.kngcl-hero-compact,
.kngcl-page-header,
body.kngcl-subpage .section.kngcl-hero-compact {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(34, 211, 238, 0.12), transparent 50%),
    linear-gradient(145deg, var(--kc-ink) 0%, var(--kc-navy) 100%) !important;
  border-bottom: 2px solid var(--kc-teal) !important;
}

body.kngcl-subpage .kngcl-hero-compact .caption h1 em,
.kngcl-hero-compact .caption h1 em {
  color: var(--kc-cyan) !important;
  font-style: normal !important;
}

/* ── Inner content well ── */
.kngcl-inner {
  background: var(--kc-bg) !important;
}

/* ── Mobile nav bar ── */
@media screen and (max-width: 950px) {
  body.kngcl-site nav#menu.main-nav ul.main-menu {
    background-color: var(--kc-ink) !important;
    border-top: 1px solid rgba(13, 148, 136, 0.3) !important;
  }

  body.kngcl-site .kngcl-mobile-bottom-nav {
    background: rgba(7, 13, 20, 0.98) !important;
    border-top: 2px solid var(--kc-teal) !important;
  }

  body.kngcl-site .kngcl-mobile-bottom-nav .kngcl-mobile-bottom-nav__link:hover:not(:disabled) {
    color: var(--kc-cyan) !important;
    background: rgba(13, 148, 136, 0.12) !important;
  }

  body.kngcl-site .kngcl-mobile-bottom-nav .kngcl-mobile-bottom-nav__link:disabled,
  body.kngcl-site .kngcl-mobile-bottom-nav .kngcl-mobile-bottom-nav__link[aria-disabled="true"] {
    background: rgba(13, 148, 136, 0.18) !important;
  }
}

::selection {
  background: rgba(13, 148, 136, 0.25);
  color: var(--kc-ink);
}

:focus-visible {
  outline-color: var(--kc-cyan) !important;
}

::-webkit-scrollbar-track {
  background: var(--kc-ink);
}

::-webkit-scrollbar-thumb {
  background: rgba(13, 148, 136, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kc-teal);
}