:root {
  --color-primary: #81c14b;
  --color-primary-container: #e6f3db;

  --color-secondary: #27b0e5;
  --color-secondary-container: #d4effa;

  --color-tertiary: #3cb2b2;
  --color-tertiary-container: #d8f0f0;

  --color-error: #e51f34;
  --color-error-container: #fad2d6;

  --color-monochrome: #efeff4;
}

/* Style hierarchy: Error (Red) > Focus (Blue) > Populated (Black) > Empty (Grey) */

/* Change input field colours */
.field-group:not(.error):not(.radio-group):focus-within label {
  color: var(--color-secondary);
}

.field-group:not(.error) input:not([type="radio"]):focus-within,
.field-group:not(.error) select:focus-within {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-secondary);
}

/* Populated state: everything black */
.field-group:not(.error) input[type="text"]:not(:placeholder-shown):not(:focus-within),
.field-group:not(.error) input[type="email"]:not(:placeholder-shown):not(:focus-within),
.field-group:not(.error) input[type="tel"]:not(:placeholder-shown):not(:focus-within),
.field-group:not(.error) input[type="number"]:not(:placeholder-shown):not(:focus-within),
.field-group:not(.error) input[type="url"]:not(:placeholder-shown):not(:focus-within) {
  color: black;
  border-color: black;
}

.field-group input[type="file"]:valid:not(:focus-within) {
  border-color: black;
}

/* Select: empty (still on placeholder option) */
.field-group select:invalid {
  border-color: #e5e7eb;
  color: #64748b;
}

/* Select: has value */
.field-group select:valid {
  border-color: black;
  color: black;
}

/* Focus state (same as input) */
.field-group:focus-within select {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-secondary);
}

/* Error state */
.field-group.error label {
  color: var(--color-error);
}

.field-group.error input,
.field-group.error select {
  color: var(--color-error);
  border-color: var(--color-error);
}

.field-group.error input:focus,
.field-group.error select:focus {
  color: var(--color-error);
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

/* ============= OTP code boxes (verify-email page) ============= */

.otp-box {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #0f172a;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.otp-box:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px var(--color-secondary);
}

/* ============= Step indicator dots ============= */

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #e5e7eb;
  transition: background-color 120ms ease, transform 120ms ease;
}

.step-dot.active {
  background-color: var(--color-secondary);
  transform: scale(1.25);
}

/* ============= Locked verified email input ============= */

input.locked-field {
  background-color: #f1f5f9;
  color: #475569;
  cursor: not-allowed;
}

input.locked-field:focus {
  border-color: #e5e7eb;
  box-shadow: none;
}

/* ============= Smooth verify → application transition ============= */

/* Small pop-in for the success checkmark */
.verified-pop {
  animation: verified-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes verified-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Fade the page out before navigating to application.php */
body.is-navigating {
  opacity: 0;
  transition: opacity 250ms ease;
}

/* ============= Accept Terms — red label until ticked ============= */
/* Draws attention to a required action the user might otherwise miss. */

#accept-terms + span {
  transition: color 200ms ease;
}

#accept-terms:not(:checked) + span {
  color: var(--color-error);
}