/* ==========================================================
   ✅ ENTERPRISE PALETTE + LIGHT MODE DEFAULT
   - Default: LIGHT (clean + high-contrast)
   - Toggle: Dark enterprise
   - Strong purple brand kept in both modes
   ========================================================== */

:root{
  /* Light (enterprise) DEFAULT */
  --bg: 248 250 252;       /* slate-50 */
  --bg2: 241 245 249;      /* slate-100 */
  --panel: 255 255 255;    /* white */
  --card: 255 255 255;     /* white */
  --card2: 248 250 252;    /* slate-50 */
  --text: 15 23 42;        /* slate-900 */
  --muted: 71 85 105;      /* slate-600 */

  /* Brand */
  --brand1: 147 51 234;    /* purple-600 */
  --brand2: 15 23 42;      /* slate-900 */
  --ring: 147 51 234;

  --shadow: 0 14px 30px rgba(15, 23, 42, .12);
  --shadow2: 0 20px 45px rgba(15, 23, 42, .16);

  /* Table / borders */
  --border: 100 116 139;   /* slate-500 */
  --borderA: .22;
  --softA: .06;
  --glassA: .86;

  /* Code blocks */
  --codeBg: 15 23 42;      /* slate-900 */
  --codeA: .92;

  /* Footer */
  --footer: 15 23 42;
}

/* Dark (enterprise) overrides */
.theme-dark{
  --bg: 15 23 42;          /* slate-900 */
  --bg2: 17 24 39;         /* slate-900/950 blend */
  --panel: 30 41 59;       /* slate-800 */
  --card: 30 41 59;        /* slate-800 */
  --card2: 51 65 85;       /* slate-700 */
  --text: 241 245 249;     /* slate-100 */
  --muted: 148 163 184;    /* slate-400 */

  --brand1: 168 85 247;    /* purple-500 */
  --brand2: 2 6 23;        /* near-black */
  --ring: 168 85 247;

  --shadow: 0 18px 40px rgba(2, 6, 23, .35);
  --shadow2: 0 22px 55px rgba(2, 6, 23, .45);

  --border: 148 163 184;   /* slate-400 */
  --borderA: .18;
  --softA: .08;
  --glassA: .68;

  --codeBg: 2 6 23;
  --codeA: .78;

  --footer: 2 6 23;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: rgb(var(--bg));
  color: rgb(var(--text));
}
section[id] { scroll-margin-top: 88px; }

/* Subtle grid */
.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(100, 116, 139, .14) 1px, transparent 0);
  background-size: 22px 22px;
}
.theme-dark .bg-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, .14) 1px, transparent 0);
}

/* Hero surface */
.hero-surface {
  background:
    radial-gradient(1100px 560px at 12% 10%, rgba(var(--brand1), .16), transparent 55%),
    radial-gradient(900px 520px at 92% 20%, rgba(99, 102, 241, .10), transparent 55%),
    linear-gradient(180deg, rgb(var(--bg2)), rgb(var(--bg)));
}
.theme-dark .hero-surface{
  background:
    radial-gradient(1100px 560px at 12% 10%, rgba(var(--brand1), .18), transparent 55%),
    radial-gradient(900px 520px at 92% 20%, rgba(99, 102, 241, .14), transparent 55%),
    radial-gradient(900px 650px at 50% 120%, rgba(2, 6, 23, .22), transparent 60%),
    linear-gradient(180deg, rgb(var(--bg2)), rgb(var(--bg)));
}

/* Glass */
.glass {
  background: rgba(var(--panel), var(--glassA));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--border), var(--borderA));
}

/* Card */
.card {
  background: rgba(var(--card), .98);
  border: 1px solid rgba(var(--border), var(--borderA));
  box-shadow: var(--shadow);
}
.theme-dark .card{ background: rgba(var(--card), .82); }

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
  border-color: rgba(var(--ring), .35);
}

/* Buttons */
.btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }

a.btn, button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(var(--brand1), 1), rgba(var(--brand2), 1));
  box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
  color: #fff !important;
  border: 1px solid rgba(var(--ring), .32);
}
.theme-dark .btn-primary { box-shadow: 0 14px 34px rgba(2,6,23,.35); }
.btn-primary:hover { box-shadow: 0 18px 42px rgba(15,23,42,.20); transform: translateY(-1px); }
.theme-dark .btn-primary:hover { box-shadow: 0 18px 42px rgba(2,6,23,.45); }

.btn-secondary {
  background: rgba(147, 51, 234, .08);
  border: 1px solid rgba(var(--ring), .35);
  color: rgb(var(--text));
}
.theme-dark .btn-secondary{
  background: rgba(var(--brand2), .14);
  color: rgb(var(--text));
}
.btn-secondary:hover { background: rgba(var(--ring), .14); transform: translateY(-1px); }

.badge {
  border: 1px solid rgba(147, 51, 234, .22);
  background: rgba(147, 51, 234, .10);
  color: rgb(88, 28, 135);
}
.theme-dark .badge{
  border: 1px solid rgba(var(--ring), .22);
  background: rgba(var(--ring), .10);
  color: rgb(216, 180, 254);
}

/* Parallax ornaments */
.orb { filter: blur(60px); opacity: .55; transform: translateZ(0); will-change: transform; }
.theme-dark .orb{ opacity: .9; filter: blur(55px); }

/* Reveal */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); }

/* Focus */
:focus-visible { outline: 3px solid rgba(var(--ring), .45); outline-offset: 3px; border-radius: 12px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-hover, .btn { transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   ✅ EXTRA MOBILE SPACING POLISH
   ========================================================== */
@media (max-width: 640px){
  .section-pad { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .hero-pad { padding-top: 3rem !important; padding-bottom: 3.75rem !important; }
  .stack-gap { gap: .875rem !important; }
  .card { border-radius: 1.25rem !important; }
  .btn { border-radius: 1.15rem !important; }
}

/* Helpers */
.bg-app { background: rgb(var(--bg)); }
.bg-app2 { background: rgb(var(--bg2)); }
.bg-footer { background: rgb(var(--footer)); color: #fff; }
.text-muted { color: rgba(var(--muted), .95); }

/* Code block (FIX: ensure never white-on-white) */
pre.codeblock{
  background: rgba(var(--codeBg), var(--codeA));
  border: 1px solid rgba(var(--border), .18);
  color: #e2e8f0; /* slate-200 */
}
pre.codeblock code{
  color: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Table head background */
.thead-soft { background: rgba(var(--border), var(--softA)); }

/* CTA links in light mode header */
.cta-darktext {
  color: rgb(2,6,23) !important; /* near-black */
}