/* ============================================================
   PoCLAB Cost Studio – Shared Theme (theme.css / calc-theme.css)
   ------------------------------------------------------------
   - Light, app-aligned palette
   - Clear card groupings
   - Enterprise-style CTAs
   ============================================================ */

:root {
  /* --- Brand hooks (tweak these if PoCLAB brand changes) --- */

  /* Primary accent (buttons, highlights) */
  --brand-primary:  #646cff;
  --brand-accent:   #61dafb;

  /* Background & surfaces */
  --brand-bg:           #dbe2eb;   /* page background */
  --brand-surface:      #f8fafc;   /* main card surface */
  --brand-surface-alt:  #e2e8f0;   /* alt/hero surface */

  /* Typography */
  --brand-text:     #0f172a;  /* text-slate-900 */
  --brand-muted:    #64748b;  /* slate-500 */

  /* Borders */
  --brand-border:         #cbd5f5; /* slate-300-ish */
  --brand-border-strong:  #94a3b8; /* slate-400-ish */

  /* --- Internal tokens (use these in components) --- */

  --bg:            var(--brand-bg);
  --card-bg:       var(--brand-surface);
  --card-bg-alt:   var(--brand-surface-alt);

  --accent:        var(--brand-primary);
  --accent-alt:    var(--brand-accent);

  --text:          var(--brand-text);
  --muted:         var(--brand-muted);
  --border:        var(--brand-border);

  --radius-lg:     1.25rem;
  --radius-md:     0.75rem;
  --shadow-soft:   0 18px 45px rgba(15, 23, 42, 0.16);
}

/* ============================================================
   Global layout & typography
   ============================================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #e5e7eb 0, var(--bg) 45%, #cbd5e1 100%);
  color: var(--text);
}

.app,
.page {
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   Cards & surfaces
   ============================================================ */

.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px 22px;  /* unified generous padding */
}

@media (max-width: 640px) {
  .card {
    padding: 20px 18px 18px;
  }
}

/* Optional alt-surface helper if you ever want a “hero” card look */
.card-alt {
  background: var(--card-bg-alt);
}

/* ============================================================
   Chips / pills / tags / small badges
   ============================================================ */

.chip,
.pill,
.tag,
.badge,
.badge-calc,
.pill-tag,
.tagline-pill {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  font-size: 0.7rem;
  color: var(--muted);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip span.dot,
.pill span.dot,
.tagline-pill span.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.25);
}

.chip span.dot.alt {
  background: var(--accent-alt);
}

/* ============================================================
   Buttons & links (base styles + hero CTA)
   ============================================================ */

/* Base “buttony” look for both <button> and link-buttons */
.btn,
.btn-link {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.95);
  background: linear-gradient(135deg, #ffffff, #f3f4f6);
  color: var(--text);
  font-size: 0.8rem;
  padding: 7px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

.btn:hover,
.btn-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
  border-color: rgba(148, 163, 184, 1);
}

/* Primary actions – hero CTAs or generic blue button */
.btn-primary,
.hero-cta {
  border-radius: 999px;
  border: 1px solid rgba(100, 108, 255, 0.9);
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover,
.hero-cta:hover {
  filter: brightness(1.05);
}

/* Highlighted link-style button (generic primary) */
.btn-link.primary {
  border-color: rgba(100, 108, 255, 0.95);
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  color: #f9fafb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
}

.btn-link.primary:hover {
  border-color: rgba(100, 108, 255, 1);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.5);
}

/* Icon bubble inside buttons – uses <span class="icon"> */
.btn-link .icon,
.btn .icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Neutral icon bubble for secondary buttons */
.btn-link:not(.primary) .icon,
.btn:not(.primary) .icon {
  background: radial-gradient(circle at 30% 20%, #e5e7eb, #cbd5f5);
  color: #4b5563;
}

/* Brighter icon bubble for primary buttons */
.btn-link.primary .icon,
.btn.primary .icon {
  background: radial-gradient(circle at 30% 20%, #fef9c3, #f97316);
  color: #7c2d12;
}

/* Accent text helper */
.highlight {
  color: var(--accent);
  font-weight: 600;
}

/* Back-to-home link */
.back-link {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* ============================================================
   Bars / bar tracks (TCO comparison bars)
   ============================================================ */

.bar-track {
  background: #e5e7eb; /* light grey so colored bars stand out */
}

/* Legacy / “A” side bars */
.bar.apn,
.bar.vpn,
.bar.starlink {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.9), #fb923c);
}

/* Modern / “B” side bars */
.bar.sase,
.bar.ztna,
.bar.capspill {
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
}

/* ============================================================
   Delta cards (savings / overage callouts)
   ============================================================ */

.delta-card {
  border-radius: var(--radius-md);
  background: #ecfdf3;      /* green-50 */
  border: 1px solid #22c55e;/* green-500 */
  color: #166534;           /* green-700 */
}

.delta-card.negative {
  background: #fef2f2;      /* red-50 */
  border-color: #f97373;    /* red-400/500 */
  color: #991b1b;           /* red-800 */
}

/* ============================================================
   Canvas / charts
   ============================================================ */

canvas {
  background: #f9fafb;      /* light grey so it stands off the card */
  border-radius: 0.75rem;
  border: 1px solid var(--brand-border-strong);
}

/* ============================================================
   Calculator cards – layout & full-width CTAs
   ============================================================ */

/* Make each calculator card a flex column so footers align at the bottom */
.calc-card {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
}

/* Footer pushed to the bottom of the card for consistent button alignment */
.calc-card-footer {
  margin-top: auto;
  padding-top: 8px;
}

/* Make every calculator launch button a full-width blue CTA */
.calc-card .btn-link {
  width: 100%;
  justify-content: center;
  border-color: rgba(100, 108, 255, 0.95);
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  color: #f9fafb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
  font-size: 0.8rem;
  padding: 8px 16px;
}

/* Hover state – slightly brighter, a bit more lift */
.calc-card .btn-link:hover {
  border-color: rgba(100, 108, 255, 1);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.55);
  transform: translateY(-1px);
}

/* Icon bubble for calculator CTAs */
.calc-card .btn-link .icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 20%, #fef9c3, #f97316);
  color: #7c2d12;
}

/* ============================================================
   Misc
   ============================================================ */

/* This file intentionally avoids layout rules beyond basic cards/body.
   Page-specific layout (headers, grids) lives in each HTML page. */