/* ==========================================================================
   Orgalytics.ai — global.css
   Design tokens + universal base styles shared by every page.
   Load order: global.css → style.css (or login.css) → responsive.css
   ========================================================================== */

:root {
  /* ----- Color ----- */
  --c-brand: #1766d6; /* primary blue */
  --c-brand-hover: #0f57bf; /* blue on hover / pressed */
  --c-ink: #0b1a3b; /* headings, darkest text */
  --c-body: #33405c; /* default body text on light surfaces */
  --c-muted: #4a5670; /* secondary text */
  --c-muted-2: #5b6782; /* tertiary text */
  --c-muted-3: #6b7690; /* quiet text, placeholders */
  --c-border: #e6ebf2; /* hairline borders */
  --c-border-soft: #eef2f8; /* faintest borders / grid lines */
  --c-surface: #ffffff; /* card / page surface */
  --c-bg-soft: #f6f8fb; /* soft section background */
  --c-tint: #e8f0fe; /* brand tint background */
  --c-ok: #34a853; /* success */
  --c-ok-bg: #e9f5ec;
  --c-ok-ink: #137333;
  --c-err: #b3261e; /* error */
  --c-err-bg: #fdecea;

  /* Dark surfaces (navy sections, dashboard mockups) */
  --c-dark: #0b1a3b; /* navy section background */
  --c-dark-2: #13254f; /* raised card on dark */
  --c-dark-3: #2a3d6b; /* borders on dark */
  --c-on-dark: #c3cee2; /* muted text on dark */
  --c-brand-soft: #8fb6f7; /* light blue text/icons on dark */

  /* ----- Typography ----- */
  --font-display: "Sora", sans-serif; /* headings */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* body */
  --font-mono: "IBM Plex Mono", monospace; /* eyebrows, code, data */

  /* ----- Spacing ----- */
  --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;

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

  /* ----- Shadow ----- */
  --shadow-card: 0 16px 36px -16px rgba(11, 26, 59, 0.22);
  --shadow-card-hover: 0 18px 40px -22px rgba(11, 26, 59, 0.25);
  --shadow-panel: 0 20px 50px -20px rgba(11, 26, 59, 0.18);
  --shadow-btn: 0 8px 20px -8px rgba(23, 102, 214, 0.55);
  --shadow-focus: 0 0 0 3px rgba(23, 102, 214, 0.18);

  /* ----- Motion ----- */
  --t-fast: 0.15s;
  --t-med: 0.2s;
  --t-slow: 0.25s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ----- Layout ----- */
  --wrap-max: 1200px;
  --wrap-pad: 40px; /* 16px below 640px — see responsive.css */
  --z-header: 20;
}

/* ==========================================================================
   Universal base
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

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%;
}

/* ==========================================================================
   Shared layout primitives
   ========================================================================== */

/* Page-width container used by every section.
   NOTE: intentionally content-box (no box-sizing) to match the original
   inline wraps — max-width applies to the content box, padding sits outside. */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}