/* ==========================================================================
   Orgalytics.ai — global design tokens & base rules (loaded on every page)
   Fonts: Plus Jakarta Sans (display + body), JetBrains Mono (data / code)
   Homepage sections live in style.css; ALL media queries in responsive.css.
   ========================================================================== */

:root {
  /* Brand */
  --c-brand: #1a73e9;
  --c-brand-hover: #0b1a3b;
  --c-brand-soft: #458cf5;
  --c-brand-text: #186cda; /* brand blue darkened just enough for WCAG AA text on white/tint and white-on-brand buttons */

  /* Ink & text */
  --c-ink: #0b1a3b;      /* headings, strongest text */
  --c-ink-2: #0e1530;    /* body ink on light surfaces */
  --c-body: #5a6380;     /* paragraph text */
  --c-body-2: #2a3150;   /* slightly stronger body text */
  --c-muted: #6a7290;
  --c-muted-2: #7a84a3;
  --c-muted-3: #8a92ad;

  /* Surfaces & lines */
  --c-surface: #ffffff;
  --c-bg-soft: #eef2f8;
  --c-tint: #eef4fe;
  --c-border: #e3e6ef;
  --c-border-soft: #eceef4;
  --c-border-faint: #eef1f7;

  /* Status */
  --c-ok: #137333;
  --c-ok-bg: #e6f4ea;
  --c-ok-ink: #137333;
  --c-err: #c5221f;
  --c-err-bg: #fdecea;
  --c-warn: #854d0e;     /* warning text (same pair as the site's .analytics-warning-badge) */
  --c-warn-bg: #fef3c7;

  /* Dark sections & footer */
  --c-dark: #0b1a3b;
  --c-dark-2: #10234d;
  --c-dark-3: #2a3d6b;
  --c-on-dark: #9fb0d3;
  --c-footer: #081430;

  /* Accents */
  --c-purple: #945fe0;
  --c-purple-ink: #6a48f0;
  --c-eye: #2f55e0;      /* section-label pill text on light sections */
  --c-eye-dk: #458cf5;   /* section-label accents on dark sections */
  --c-code: #0e7490;

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --heading-letter-spacing: normal;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 24px 50px -40px rgba(14, 21, 48, .35);
  --shadow-card-hover: 0 30px 56px -36px rgba(61, 107, 255, .4);
  --shadow-panel: 0 30px 60px -36px rgba(11, 26, 59, .28);
  --shadow-btn: 0 10px 28px -10px rgba(26, 115, 232, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
  --shadow-focus: 0 0 0 3px rgba(26, 115, 233, .18);

  /* Motion */
  --t-fast: .15s;
  --t-med: .2s;
  --t-slow: .25s;
  --ease: ease;

  /* Layout */
  --wrap-max: 1250px;
  --wrap-pad: 24px;
  --z-header: 50;
}

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the 72px sticky header (see .site-header). */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--c-brand);
  text-decoration: none;
}

a:hover {
  color: var(--c-brand-hover);
}

button {
  font: inherit;
}

img {
  max-width: 100%;
}