/*
 * Signal Banker design tokens.
 * The single source of colors, typography and spacing. bootstrap-overrides.css maps these onto Bootstrap's
 * variables; site.css uses them for the sb-* components. Loaded after Bootstrap, before the other site files.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

:root {
  /* Colors */
  --sb-ink: #101d35;              /* headings and primary text (16.8:1 on white) */
  --sb-ink-rgb: 16, 29, 53;
  --sb-muted: #52627a;            /* secondary text (6.2:1 on white, 5.6:1 on surface-soft) */
  --sb-brand: #008a55;            /* brand green: borders, focus, large text */
  --sb-brand-rgb: 0, 138, 85;
  --sb-brand-strong: #008651;     /* primary button background: 4.64:1 with white text (see README) */
  --sb-brand-hover: #006f44;      /* 6.26:1 with white text */
  --sb-brand-active: #005c39;
  --sb-brand-soft: #e6f4ee;       /* badge and icon backgrounds */
  --sb-accent-green: #13a76b;     /* decorative only, never behind small white text */
  --sb-gold: #c58a18;             /* "PRO" in the wordmark; decorative accent */
  --sb-gold-soft: #fbf1dc;
  --sb-gold-strong: #8a5a00;      /* gold icon on gold-soft (5.3:1) */
  --sb-link: #1d4ed8;             /* inline text links such as "Explore Signal Banker PRO" */
  --sb-icon-subtle: #8795a8;      /* placeholder icons (decorative) */
  --sb-on-dark-muted: #d9e2ec;    /* secondary text on the ink background */
  --sb-surface: #ffffff;
  --sb-surface-soft: #f0f4f8;
  --sb-border: #d9e2ec;
  --sb-danger: #b42318;           /* form errors (6.6:1 on white) */
  --sb-danger-soft: #fdecea;

  /* Shape */
  --sb-radius: 8px;
  --sb-radius-lg: 12px;
  --sb-radius-pill: 999px;

  /* Typography */
  --sb-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-font-size-base: 1rem;       /* 16px */
  --sb-line-height-base: 1.6;
  --sb-h1-size: clamp(2.25rem, 4.8vw, 4rem);
  --sb-h1-line-height: 1.05;
  --sb-h1-weight: 780;
  --sb-h2-size: clamp(1.625rem, 2.4vw, 2rem); /* 26–32px */
  --sb-h2-weight: 700;
  --sb-lead-size: 1.125rem;
  --sb-small-size: 0.875rem;

  /* Layout */
  --sb-container-max: 1140px;
  --sb-header-height: 5rem;        /* 80px */
  --sb-section-space: 2.25rem;     /* 36px on small screens */
  --sb-control-height: 2.75rem;    /* 44px minimum touch target */
  --sb-control-height-lg: 3rem;    /* 48px form button */

  /* Focus */
  --sb-focus-ring-color: rgba(0, 134, 81, 0.4);
  --sb-focus-outline: 3px solid var(--sb-brand);
}

@media (min-width: 992px) {
  :root {
    --sb-section-space: 4.5rem;    /* 72px on desktop */
  }
}