/* Jalvo UI Kit — tokens. Light is default. Dark: <html data-theme="dark"> (js/jalvo.js sets it from prefers-color-scheme unless the user picked one). */
:root {
  /* ---------- primitives ---------- */
  --jv-blue-50:#EEF4FF; --jv-blue-100:#DAE7FE; --jv-blue-200:#B6D0FE; --jv-blue-300:#91B8FE; --jv-blue-400:#4D8BFF;
  --jv-blue-500:#1F6BFF; --jv-blue-600:#005BFE; --jv-blue-700:#0049CC; --jv-blue-800:#003FB3; --jv-blue-900:#0A2A73; --jv-blue-950:#081226;
  --jv-neutral-0:#FFFFFF; --jv-neutral-50:#F5F7FB; --jv-neutral-100:#EDF0F5; --jv-neutral-200:#E2E7F0; --jv-neutral-300:#C9D2E1;
  --jv-neutral-400:#9AA6BC; --jv-neutral-500:#6B7890; --jv-neutral-600:#4B5873; --jv-neutral-700:#2A354D; --jv-neutral-800:#1C2946;
  --jv-neutral-900:#0E1B36; --jv-neutral-950:#0B1324;
  --jv-navy-900:#081226; --jv-navy-800:#0E1B36; --jv-navy-700:#13203D; --jv-navy-600:#22304F; --jv-navy-500:#3A4B72;
  --jv-green-100:#DDF5E8; --jv-green-600:#0E7A45; --jv-green-800:#0B5E36;
  --jv-amber-100:#FFF4DB; --jv-amber-600:#B87900; --jv-amber-800:#7A4D00;
  --jv-red-100:#FDE8E8; --jv-red-600:#C62828; --jv-red-800:#9B1C1C;
  --jv-teal-500:#0EA5A4; /* data / charts accent */

  /* ---------- semantic (light) ---------- */
  --jv-bg:#FFFFFF; --jv-bg-subtle:#F5F7FB;
  --jv-surface:#FFFFFF; --jv-surface-raised:#FFFFFF; --jv-surface-sunken:#F5F7FB; --jv-surface-hover:#F5F7FB;
  --jv-border:#E2E7F0; --jv-border-strong:#C9D2E1;
  --jv-text:#0B1324; --jv-text-2:#2A354D; --jv-text-muted:#4B5873; --jv-text-inverse:#FFFFFF;
  --jv-primary:#005BFE; --jv-primary-hover:#0049CC; --jv-primary-active:#003FB3;
  --jv-primary-soft:#DAE7FE; --jv-primary-soft-text:#003FB3; --jv-on-primary:#FFFFFF;
  --jv-link:#005BFE; --jv-link-hover:#0049CC;
  --jv-focus-ring:#005BFE;
  --jv-success:#0E7A45; --jv-success-soft:#DDF5E8; --jv-success-text:#0B5E36;
  --jv-warning:#B87900; --jv-warning-soft:#FFF4DB; --jv-warning-text:#7A4D00;
  --jv-danger:#C62828;  --jv-danger-soft:#FDE8E8;  --jv-danger-text:#9B1C1C;
  --jv-info:#005BFE;    --jv-info-soft:#DAE7FE;    --jv-info-text:#003FB3;
  --jv-logo-node:#91B8FE; --jv-logo-color:#005BFE;
  --jv-overlay:rgba(8,18,38,.56);

  /* ---------- type ---------- */
  --jv-font-display:"Montserrat", "Jalvo Montserrat Fallback", system-ui, sans-serif;
  --jv-font-body:"IBM Plex Sans", "Jalvo Plex Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jv-font-mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --jv-fs-display:clamp(2.125rem, 1.35rem + 3.1vw, 3.5rem);
  --jv-fs-h1:clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
  --jv-fs-h2:clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --jv-fs-h3:clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --jv-fs-h4:1.125rem;
  --jv-fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --jv-fs-body-lg:clamp(1.0625rem, 1.03rem + .12vw, 1.125rem); /* 17 → 18 px, blog */
  --jv-fs-body:1rem; --jv-fs-small:.9375rem; --jv-fs-caption:.8125rem; --jv-fs-overline:.8125rem; --jv-fs-mono:.875rem;
  --jv-lh-tight:1.1; --jv-lh-heading:1.2; --jv-lh-body:1.55; --jv-lh-prose:1.7;
  --jv-fw-regular:400; --jv-fw-medium:500; --jv-fw-semibold:600; --jv-fw-bold:700;
  --jv-ls-display:-.02em; --jv-ls-overline:.12em; --jv-ls-logo:.2em;

  /* ---------- space (4 px base) ---------- */
  --jv-space-1:4px; --jv-space-2:8px; --jv-space-3:12px; --jv-space-4:16px; --jv-space-5:20px; --jv-space-6:24px;
  --jv-space-8:32px; --jv-space-10:40px; --jv-space-12:48px; --jv-space-14:56px; --jv-space-16:64px; --jv-space-20:80px; --jv-space-24:96px;

  /* ---------- layout ---------- */
  --jv-w-content:1200px; --jv-w-reading:720px; --jv-w-narrow:560px;
  --jv-gutter:20px; --jv-section-y:clamp(56px, 8vw, 112px);
  /* breakpoints (use literally in media queries): sm 480, md 768, lg 1024, xl 1280, 2xl 1440 */

  /* ---------- shape & depth ---------- */
  --jv-radius-sm:4px; --jv-radius-md:8px; --jv-radius-lg:12px; --jv-radius-xl:16px; --jv-radius-pill:999px;
  --jv-shadow-1:0 1px 2px rgba(11,19,36,.06);
  --jv-shadow-2:0 4px 12px rgba(11,19,36,.08);
  --jv-shadow-3:0 12px 32px rgba(11,19,36,.14);
  --jv-shadow-4:0 24px 64px rgba(11,19,36,.24);
  --jv-z-sticky:10; --jv-z-header:50; --jv-z-dropdown:100; --jv-z-menu:200; --jv-z-dialog:300; --jv-z-toast:400; --jv-z-cookie:500;

  /* ---------- motion ---------- */
  --jv-dur-fast:120ms; --jv-dur:200ms; --jv-dur-slow:320ms; --jv-ease:cubic-bezier(.2,.8,.2,1);
}
@media (min-width:768px) { :root { --jv-gutter:32px; } }

/* Dark: dashboard theme + any .jv-dark marketing section */
[data-theme="dark"], .jv-dark {
  --jv-bg:#081226; --jv-bg-subtle:#0B1830;
  --jv-surface:#0E1B36; --jv-surface-raised:#13203D; --jv-surface-sunken:#0A1529; --jv-surface-hover:#13203D;
  --jv-border:#22304F; --jv-border-strong:#3A4B72;
  --jv-text:#FFFFFF; --jv-text-2:#C8D3EA; --jv-text-muted:#A9B6D0; --jv-text-inverse:#0B1324;
  --jv-primary:#005BFE; --jv-primary-hover:#1F6BFF; --jv-primary-active:#0049CC;
  --jv-primary-soft:#13264F; --jv-primary-soft-text:#B6D0FE; --jv-on-primary:#FFFFFF;
  --jv-link:#8DB4FF; --jv-link-hover:#B6D0FE; --jv-focus-ring:#8DB4FF;
  --jv-success:#3DD68C; --jv-success-soft:#0F2E22; --jv-success-text:#7BE3B0;
  --jv-warning:#F5B83D; --jv-warning-soft:#33260A; --jv-warning-text:#FFD27A;
  --jv-danger:#FF6B6B;  --jv-danger-soft:#3A1518; --jv-danger-text:#FF9A9A;
  --jv-info:#8DB4FF;    --jv-info-soft:#13264F;   --jv-info-text:#B6D0FE;
  --jv-logo-color:#FFFFFF;
  --jv-shadow-2:0 4px 12px rgba(0,0,0,.35); --jv-shadow-3:0 12px 32px rgba(0,0,0,.45); --jv-shadow-4:0 24px 64px rgba(0,0,0,.6);
}
.jv-dark { background:var(--jv-bg); color:var(--jv-text); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}