/* ================================================================
   Flexicore brand overrides
   Remaps GuntioStack tokens to Flexicore palette (logo-derived).

   Primary  — Cyan       #46BDD6  (logo cyan arc)
   Secondary— Slate Blue #50819D  (logo darker arc)
   Charcoal — #121212 (replaces pure black / coffee-800/900)

   We override the existing token names (terracotta-* / coffee-800/900)
   so the rest of the stylesheet picks up the new palette with zero
   touch-up.
   ================================================================ */

:root {
  /* ---- Primary: Cyan scale (was terracotta) ------------------ */
  --terracotta-50:  #ECF8FB;
  --terracotta-100: #CFEEF5;
  --terracotta-200: #A3DCEB;
  --terracotta-300: #76C9DF;
  --terracotta-400: #59C0D9;
  --terracotta-500: #46BDD6;  /* brand primary — logo cyan */
  --terracotta-600: #2FA3BD;
  --terracotta-700: #1E879F;
  --terracotta-800: #166577;
  --terracotta-900: #0E4451;

  /* convenience aliases — same values, brand-named */
  --cyan-50:  #ECF8FB;
  --cyan-100: #CFEEF5;
  --cyan-200: #A3DCEB;
  --cyan-300: #76C9DF;
  --cyan-400: #59C0D9;
  --cyan-500: #46BDD6;
  --cyan-600: #2FA3BD;
  --cyan-700: #1E879F;
  --cyan-800: #166577;
  --cyan-900: #0E4451;

  /* ---- Secondary: Slate Blue scale --------------------------- */
  --slateblue-50:  #EEF3F7;
  --slateblue-100: #D2DEE7;
  --slateblue-200: #A6BCCC;
  --slateblue-300: #7B9DB3;
  --slateblue-400: #608AA3;
  --slateblue-500: #50819D;  /* brand secondary — logo slate */
  --slateblue-600: #426A82;
  --slateblue-700: #345367;
  --slateblue-800: #263D4C;
  --slateblue-900: #182832;

  /* override the bundled slate-* tokens too so any badge/icon
     using slate-50 / slate-700 stays on-palette */
  --slate-50:  #EEF3F7;
  --slate-100: #D2DEE7;
  --slate-500: #50819D;
  --slate-700: #345367;
  --slate-900: #182832;

  /* ---- Charcoal: replaces coffee-800 / coffee-900 ------------ */
  --coffee-800: #1F1F1F;  /* mid dark */
  --coffee-900: #121212;  /* user-specified charcoal */
  --charcoal:   #121212;

  /* ---- Canvas + surface (cool neutral instead of warm cream) - */
  --coffee-50:  #F4F7FA;
  --coffee-100: #EAEFF4;
  --coffee-200: #DCE3EB;
  --coffee-300: #C2CCD8;
  --coffee-400: #94A1B0;
  --coffee-500: #6B7886;
  --coffee-600: #4D5763;
  --coffee-700: #2F3640;

  --canvas:          var(--coffee-50);
  --surface:         #FFFFFF;
  --surface-sunken:  var(--coffee-100);

  --fg-default:      var(--charcoal);
  --fg-muted:        var(--coffee-600);
  --fg-subtle:       var(--coffee-500);
  --fg-disabled:     var(--coffee-400);
  --fg-brand:        var(--cyan-600);

  --border-default:  var(--coffee-200);
  --border-subtle:   var(--coffee-100);
  --border-strong:   var(--coffee-300);
  --border-focus:    var(--cyan-500);

  --bg-hover:        rgba(18, 18, 18, 0.04);
  --bg-pressed:      rgba(18, 18, 18, 0.08);
  --bg-selected:     var(--cyan-50);

  /* chart token tweak so charts also adopt brand */
  --chart-1: #46BDD6;
  --chart-2: #50819D;
  --chart-3: #C18A2C;
  --chart-4: #6B8E5A;
  --chart-5: #7A4FAB;
  --chart-grid: var(--coffee-100);
  --chart-axis: var(--coffee-400);
}

/* ---- Component-level tweaks the override can't reach via tokens */

/* On-dark text — switch warm cream to a cool off-white */
.stats, .stats h2, .stats .stat-card .v,
footer .footer-brand .brand-name,
footer .footer-grid h4 { color: #F4F7FA; }

footer { color: rgba(244, 247, 250, 0.7); }
.footer-grid a { color: rgba(244, 247, 250, 0.65); }
.footer-grid a:hover { color: #F4F7FA; }
.footer-grid { border-bottom-color: rgba(244, 247, 250, 0.1); }
.stat-card { border-left-color: rgba(244, 247, 250, 0.15); }
.stat-card .l { color: rgba(244, 247, 250, 0.7); }
.stats-head p { color: rgba(244, 247, 250, 0.7); }

.btn-primary { background: var(--charcoal); color: #F4F7FA; }
.btn-primary:hover { background: #000; }

/* Brand wordmark "core" highlight — secondary slate for contrast */
.brand-name b { color: var(--cyan-600); }
.footer-brand .brand-name b { color: var(--cyan-400); }

/* Hero h1 italic highlight: cyan underline-block */
.hero h1 em { color: var(--cyan-700); }
.hero h1 em::after { background: var(--cyan-100); }

/* Logo lockup */
.brand { gap: 12px; }
.brand-mark {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: 0;
  display: grid; place-items: center;
}
.brand-mark svg, .brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--charcoal);
}
.footer-brand .brand-name { color: #F4F7FA; }

/* Mix in slate secondary on alternating benefit icons */
.benefits-grid .benefit:nth-child(even) .icon {
  background: var(--slateblue-50);
  color: var(--slateblue-700);
}

/* Case study product tag — switch warm rgba to cool */
.case-cover .product-tag { background: rgba(18, 18, 18, 0.85); color: #F4F7FA; }

/* Hero floating cards — drop shadow tint tweak for cool palette */

/* CTA decorative blob — soften with cyan */
.cta-card::before {
  background: radial-gradient(circle, var(--cyan-100), transparent 65%);
}

/* Stats radial highlight tint */
.stats::before {
  background: radial-gradient(circle at 20% 30%, rgba(70, 189, 214, 0.18), transparent 50%);
}

/* Logo bullet check — cyan */
.bullet-list .check { background: var(--cyan-50); color: var(--cyan-700); }

/* Solutions tab arrow + tag — primary */
.sol-tab .arrow { color: var(--cyan-600); }
.sol-panel-head .tag { color: var(--cyan-800); background: var(--cyan-50); }
.sol-features li::before { background: var(--cyan-500); }

/* Mock dot.brand stays primary */
.dot.brand { background: var(--cyan-500); }

/* hero meta sup — slate (was terracotta) */
.hero-meta .stat .v sup { color: var(--cyan-600); }

/* case stats values — slate to differentiate from CTAs */
.case-stats .v { color: var(--slateblue-600); }

/* stat card sup on dark — cyan light */
.stat-card .v sup { color: var(--cyan-300); }

/* hero card bar charts re-tinted */
.bar-wrap .bar { background: var(--cyan-200); }
.bar-wrap .bar.h { background: var(--cyan-500); }

/* hero-eyebrow pill */
.hero-eyebrow-row .pill { background: var(--cyan-50); color: var(--cyan-800); }

/* CTA pill icons */
.cta-side .pill .ic { background: var(--cyan-50); color: var(--cyan-700); }

/* Logos label / row — neutral charcoal-ish */
.logo-text { color: var(--coffee-700); }

/* mobile drawer primary action */
.mobile-drawer .drawer-cta { background: var(--charcoal) !important; color: #F4F7FA !important; margin-top: 12px; text-align: center; }

/* Story stamp */
.story-art .stamp { color: var(--charcoal); }

/* Tech stack chips (used in Software Dev solution panel) */
.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.stack-chips span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  color: var(--fg-default);
}
.stack-chips span:nth-child(4n+1) { color: var(--cyan-700); border-color: var(--cyan-200); background: var(--cyan-50); }
.stack-chips span:nth-child(4n+2) { color: var(--slateblue-700); border-color: var(--slateblue-200); background: var(--slateblue-50); }

/* Benefit segmented tabs (Why Flexicore: dev vs ops) */
.benefit-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 36px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 18px;
}
.bt-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 180ms var(--ease-default), color 180ms;
  color: var(--fg-default);
}
.bt-tab:hover { background: var(--bg-hover); }
.bt-tab.active {
  background: var(--charcoal);
  color: #F4F7FA;
}
.bt-tab .bt-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--cyan-50);
  color: var(--cyan-700);
  display: grid; place-items: center;
  flex: none;
  transition: background 180ms, color 180ms;
}
.bt-tab.active .bt-icon {
  background: var(--cyan-500);
  color: var(--charcoal);
}
.bt-tab .bt-icon svg { width: 20px; height: 20px; }
.bt-tab .bt-text { display: flex; flex-direction: column; min-width: 0; }
.bt-tab .bt-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.bt-tab .bt-sub {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.bt-tab.active .bt-sub { color: rgba(244, 247, 250, 0.65); }

.bt-pane { display: none; }
.bt-pane.active { display: grid; animation: fadeUp 360ms var(--ease-default); }

@media (max-width: 720px) {
  .benefit-tabs { grid-template-columns: 1fr; }
  .bt-tab { padding: 14px 16px; }
}