/*
 * KII brand design tokens. Loaded FIRST so the original Elementor stylesheets, whose
 * legacy colours are mapped to these variables (config/brand-color-map.json), can use them.
 */
:root {
  /* Brand, toned (owner request 2026-11-09, round 5: "same main colours, a little more subtle").
   * Same hues as the brand originals #003BDE / #199E00 / #FCFF59, about 30% less saturated.
   * Shared with the staff Workbench (public/workbench/style.css) so both look like one site. */
  --kii-blue: #1f4bc1; /* brand #003BDE toned: 7.4:1 with white (AAA) */
  --kii-green: #3a8627; /* brand #199E00 toned: 4.55:1 with white (AA, was 3.5:1) */
  --kii-yellow: #edef80; /* brand #FCFF59 toned: highlights on dark only */

  /* Derived shades for contrast-sensitive uses */
  --kii-blue-deep: #203c88; /* hover / dark tiles: 10:1 with white */
  --kii-blue-tint: #edf1fa;
  --kii-blue-ink: #14234d; /* darkest brand-blue shade: footer, utility bar, overlays (replaces the old greys) */
  --kii-green-deep: #27651b; /* white text on green: 7:1 (AAA) */
  --kii-green-tint: #edf5ea;
  --kii-yellow-tint: #fbfbdf;

  /* Neutrals */
  --kii-ink: #1b1f27;
  --kii-ink-muted: #4a5160;
  --kii-line: #dde2ea;
  --kii-surface: #ffffff;
  --kii-surface-alt: #f5f7fb;

  /* Shape & depth */
  --kii-radius-sm: 6px;
  --kii-radius: 10px;
  --kii-radius-lg: 16px;
  --kii-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
  --kii-shadow: 0 4px 12px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.06);
  --kii-shadow-lg: 0 12px 32px rgb(16 24 40 / 0.14);
  --kii-focus: 0 0 0 3px var(--kii-surface), 0 0 0 6px var(--kii-blue);
  --kii-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Elementor global colours -> brand (the kit stylesheet is mapped too; this covers late overrides) */
  --e-global-color-accent: var(--kii-blue);
}