:root {
  /* === COLORS === */
  --white: #f9f9f9;
  --light-grey: #f0f0f0;
  --grey: #e3e4e5;
  --dark-grey: #c3bebe;
  --blue: #4a90e2;
  --dark-blue: #07376e;

  /* === SEMANTIC COLORS === */
  --color-background: var(--white);
  --color-btn: var(--white);
  --color-border: var(--dark-grey);
  --color-primary: var(--blue);
  --color-text: var(--dark-blue);

  /* === BUTTON DIMENSIONS === */
  --btn-round-size: 7.5vw;
  --btn-round-radius: 50%;

  /* === BORDERS & STROKES === */
  --stroke-width: 6px;

  /* === SVG CALCULATIONS === */
  --svg-radius: 50px;
  /* Circle circumference: 2π×radius + 1px to hide tiny stroke */
  --svg-ring-length: calc(2 * 3.14159 * var(--svg-radius) + 1px);

  /* === ANIMATIONS === */
  --duration-focus: 2s;
  --duration-click: 0.5s;

  /* === SHADOWS === */
  --shadow-initial: 0px 5px 15px rgba(0, 0, 0, 0.4);
  --shadow-pressed: 0px 3px 5px rgba(0, 0, 0, 0.5);
}