/* Design tokens: the single source for colours, type, spacing and radii.
   Shared by the portal and the WordPress theme. */
:root {
  /* Brand (from the logo) */
  --sb-navy: #023d5b;
  --sb-blue: #07516c;
  --sb-teal: #09bdb1;
  --sb-teal-strong: #06837b; /* white text on this passes AA (4.6:1); white on --sb-teal fails (2.4:1) */
  --sb-bg: #f9f8f5;

  /* Neutrals and states */
  --sb-surface: #ffffff;
  --sb-text: #1b2a33;
  --sb-text-muted: #55636c;
  --sb-border: #d9dde0;
  --sb-danger: #b3261e;
  --sb-danger-bg: #fdecea;
  --sb-focus: #06837b; /* the deeper teal: a focus ring needs 3:1 against white (bright teal is 2.35:1) - accessibility pass, 15 Oct 2026 */
  /* Loading placeholders (skeletons): a soft grey with a lighter band passing over it. */
  --sb-skeleton: #e8ebed;
  --sb-skeleton-shine: #f5f6f7;

  /* Type - a little denser since 4 Oct 2026 (owner: "reduce some font size and spacings"), closer
     to LinkedIn: body 14px, small 13px, card titles 16px (.skpa_card__title), page titles 24px. */
  --sb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sb-text-sm: 0.8125rem;
  --sb-text-md: 0.875rem;
  --sb-text-lg: 1.125rem;
  --sb-text-xl: 1.5rem;

  /* Spacing */
  --sb-space-1: 0.25rem;
  --sb-space-2: 0.5rem;
  --sb-space-3: 0.75rem;
  --sb-space-4: 1rem;
  --sb-space-6: 1.5rem;
  --sb-space-8: 2rem;

  /* Radii and shadow */
  --sb-radius-sm: 6px;
  --sb-radius: 10px;
  --sb-shadow: 0 1px 2px rgba(2, 61, 91, 0.08), 0 4px 16px rgba(2, 61, 91, 0.06);
}