/* Single color source for public pages. Geometry lives in the existing stylesheets. */
:root {
  --bg: #ffffff;
  --surface: #f4f6f7;
  --surface-strong: #e8ecef;
  --white: #ffffff;
  --text: #202529;
  --graphite: #20272c;
  --graphite-2: #333d43;
  --muted: #626b70;
  --soft: var(--muted);
  --stone: var(--graphite-2);
  --green: var(--text);
  --line: #dce1e4;
  --on-dark-muted: #d7dde0;
  --line-dark: #4b565d;
  --focus: #46545c;
  --footer: #29343a;
  /* Viber retains its recognizable, saturated service color. */
  --viber: #6654e8;
  --viber-hover: #5846d8;
  --viber-soft: var(--viber);
  --ink-rgb: 17, 17, 17;
  --white-rgb: 255, 255, 255;
  --viber-rgb: 102, 84, 232;
}

/* A two-tone ring stays visible on both graphite and light surfaces. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--white);
}

.dark-cta :focus-visible,
.production-cycle-band :focus-visible,
.paving-masthead :focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 3px var(--graphite);
}