/*
 * Sorank design tokens: the only colors, radii and shadows the site uses. Loaded first, before the
 * Webflow export, so every stylesheet and component can read them.
 *
 * Contrast (WCAG 2.2 AA): every `--srk-text*` and `--srk-blue-strong` reads at 4.5:1 or more on
 * white, `--srk-surface*` and `--srk-blue-50/100` (normal text); white text on `--srk-blue-strong`,
 * `--srk-green-strong`, `--srk-red` and `--srk-ink` reads at 4.5:1 or more too. `--srk-blue` (brand
 * blue, 3.6:1 on white) is for fills, icons, borders and text of 24 px or 19 px bold and more only.
 * Third-party brand colors (Google, LinkedIn, CMS logos and mockups) stay literal in their component.
 */
:root {
  /* Neutrals */
  --srk-white: #fff;
  --srk-black: #000;
  --srk-ink: #111;            /* headings and body text of the components */
  --srk-text-muted: #4b5563;  /* secondary text: 7.5:1 on white */
  --srk-text-subtle: #5f6673; /* captions, notes, meta: 5.8:1 on white, 5.2:1 on --srk-surface-2 */
  --srk-line: #e5e7eb;        /* borders and separators */
  --srk-line-strong: #d1d5db; /* form fields, strong separators */
  --srk-surface: #fafafa;     /* light grey section and card background */
  --srk-surface-2: #f3f3f3;   /* grey section background, hover */

  /* Brand blue */
  --srk-blue: #4383f2;        /* brand: fills, icons, borders, large text */
  --srk-blue-strong: #2a62d4; /* links, small blue text, blue buttons with white text */
  --srk-blue-strong-hover: #234fb0;
  --srk-blue-deep: #1e3a8a;   /* dark blue text and backgrounds */
  --srk-blue-50: #f6f8ff;     /* tinted background */
  --srk-blue-100: #eef3fe;    /* tinted background, badges */
  --srk-blue-200: #e3ebfd;    /* tinted borders, selected state */
  --srk-blue-300: #c9dafc;    /* stronger tinted borders */

  /* Status */
  --srk-green: #16a34a;        /* fills and icons (checks, dots) */
  --srk-green-strong: #047857; /* green text */
  --srk-green-50: #ecfdf5;
  --srk-red: #d30000;          /* red text, icons and fills */
  --srk-red-50: #fef2f2;
  --srk-amber: #f59e0b;        /* fills and icons (stars, warnings) */
  --srk-amber-strong: #b45309; /* amber text */
  --srk-amber-50: #fff7ed;

  /* Radii */
  --srk-radius-xs: 4px;
  --srk-radius-sm: 8px;
  --srk-radius-md: 12px;
  --srk-radius-lg: 16px;
  --srk-radius-xl: 24px;
  --srk-radius-pill: 999px;

  /* Shadows */
  --srk-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --srk-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --srk-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Focus ring, visible on every background */
  --srk-focus: 0 0 0 3px rgba(67, 131, 242, 0.45);
}